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">
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>
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>
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>
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>
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>