Scroll Animations

Standard Example

Set the "data-cue" attribute in the target element and specify the animation type.

<img src="1.jpg" data-cue="fadeIn">
<img src="2.jpg" data-cue="fadeIn">
<img src="3.jpg" data-cue="fadeIn">
<img src="4.jpg" data-cue="fadeIn">
<img src="5.jpg" data-cue="fadeIn">

Parent Wrap

You can wrap it in a parent element by setting the "data-cues" attribute.

<div data-cues="fadeIn">
 <img src="1.jpg">
 ...
 <img src="5.jpg">
</div>

Grouping Wrap

You can group target elements by setting the "data-group" attribute. With grouping, when the first element is triggered, the remaining elements are also triggered sequentially, regardless of the scroll amount.

<div data-cues="fadeIn" data-group="images">
 <img src="1.jpg">
 ...
 <img src="5.jpg">
</div>

[data-duration]

You can set the showing time of the element.(ms)

<div data-cues="fadeIn" data-duration="2000">
 <img src="1.jpg">
 <img src="2.jpg">
 <img src="3.jpg" data-duration="500">
 <img src="4.jpg" data-duration="500">
 <img src="5.jpg">
</div>

[data-interval]

You can set the showing interval time of the element.(ms)

<div data-cues="fadeIn" data-interval="-200">
 <img src="1.jpg">
 <img src="2.jpg">
 <img src="3.jpg" data-interval="1000">
 <img src="4.jpg" data-interval="-0.2">   <!-- 200ms -->
 <img src="5.jpg">
</div>

[data-delay]

You can set the showing delay time of the element.(ms)

<div data-cues="fadeIn" data-delay="1000">
 <img src="1.jpg">
 <img src="2.jpg" data-delay="2000">
 <img src="3.jpg">
 <img src="4.jpg">
 <img src="5.jpg">
</div>