in-view-animations v1.1.0

What is IVA?

This package helps you to animate elements once they come into view on your page, using the Javascript Intersection observer in combination with css styling.

How to use:

This module relies on some data-attributes to be added to your elements.

It's advised to add an extra container around your elements solely for your IVA attributes to avoid conflicting transforms and other CSS definitions.

Don't forget to add the css styling to your stylesheet.

Add the data-iva to any element to target it. Then use iva-modifiers to modify the animation. Example:

<div class="example" data-iva data-iva-visibility="hidden" data-iva-move="up" data-iva-duration="0.8"  data-iva-delay="0.5"></div>

ATTRIBUTES

data-iva-move

options: up, down, left, right

default: up

data-iva-visibility

options: hidden

default: visible

data-iva-duration

options: (decimal number) between 0 and 1

default: 0.4

data-iva-delay

options: (decimal) number between 0 and 1

default: 0

data-iva-threshold

options: (decimal) number between 0 and 1

default: 0.4