Examples

Simple animation

Parent driven animation

Staggered animation

Use the data-option-play-range attribute with a value following the pattern [index, length, step] to add a staggered effect on multiple components.

Sequentially played animation

Like the staggered animation, use the pattern [index, length, step] for the data-option-play-range attribute, but set the step value to be 1 / length to make each animation in the staggered list play one after another.

Parallax

You can easily implement a parallax effect with images by combining the ScrollAnimation class with the Figure component.

Here, we even use the ImageGrid organism to quickly have a nice listing layout. We are able to configure it to wrap each image in a Parallax component.

Parallax with a parent

It might be sometimes interesting to use the parent ↔ child logic of the ScrollAnimation component to improve performance, as only the parent progression in the viewport is watched.

The resulting effect is different as each child animation is driven by the parent one, but it is still interesting.