Set the "data-cue" attribute in the target element and specify the animation type.
<img src="001.jpg" data-cue="fadeIn">
<img src="002.jpg" data-cue="fadeIn">
<img src="003.jpg" data-cue="fadeIn">
<img src="004.jpg" data-cue="fadeIn">
<img src="005.jpg" data-cue="fadeIn">
<img src="006.jpg" data-cue="fadeIn">
You can wrap it in a parent element by setting the "data-cues" attribute.
<div data-cues="fadeIn">
<img src="001.jpg">
<img src="002.jpg">
<img src="003.jpg">
<img src="004.jpg">
<img src="005.jpg">
<img src="006.jpg">
</div>
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="001.jpg">
...
<img src="008.jpg">
</div>
You can set the showing time of the element.(ms)
<div data-cues="fadeIn" data-duration="2000">
<img src="001.jpg">
<img src="002.jpg">
<img src="003.jpg" data-duration="500">
<img src="004.jpg" data-duration="500">
<img src="005.jpg">
<img src="006.jpg">
</div>
You can set the showing interval time of the element.(ms)
<div data-cues="fadeIn" data-interval="-200">
<img src="001.jpg">
<img src="002.jpg">
<img src="003.jpg" data-interval="1000">
<img src="004.jpg" data-interval="-0.2"> <!-- 200ms -->
<img src="005.jpg">
<img src="006.jpg">
</div>
You can set the showing delay time of the element.(ms)
<div data-cues="fadeIn" data-delay="1000">
<img src="001.jpg">
<img src="002.jpg" data-delay="2000">
<img src="003.jpg">
<img src="004.jpg">
<img src="005.jpg">
<img src="006.jpg">
</div>
You can set the showing order of the elements individually.
If you set a negative number, the order will be from the end.
<div data-cues="fadeIn" data-group="images">
<img src="001.jpg" data-order="-1"> <!-- 6 -->
<img src="002.jpg"> <!-- 3 -->
<img src="003.jpg"> <!-- 4 -->
<img src="004.jpg"> <!-- 5 -->
<img src="005.jpg" data-order="1"> <!-- 1 -->
<img src="006.jpg" data-order="2"> <!-- 2 -->
</div>
You can set any class names when showing the element.
<div data-cues="fadeIn" data-addClass="border foo bar">
<img src="001.jpg">
<img src="002.jpg" data-order="border-red">
<img src="003.jpg">
<img src="004.jpg" data-order="border-red">
<img src="005.jpg">
<img src="006.jpg">
</div>
You can reverse the showing order of the elements.
<div data-cues="fadeIn" data-group="images" data-sort="reverse">
<img src="001.jpg">
<img src="002.jpg">
<img src="003.jpg">
<img src="004.jpg">
<img src="005.jpg">
<img src="006.jpg">
</div>
You can randomize the showing order of the elements.
<div data-cues="fadeIn" data-group="images" data-sort="random">
<img src="001.jpg">
<img src="002.jpg">
<img src="003.jpg">
<img src="004.jpg">
<img src="005.jpg">
<img src="006.jpg">
</div>