@@include('docs/_sidebar.html', {"page": "elements-animations"})

Standard Example

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

View example's code

<img src="1.jpg" data-cue="fadeIn" alt="" />
<img src="2.jpg" data-cue="fadeIn" alt="" />
<img src="3.jpg" data-cue="fadeIn" alt="" />

Parent Wrap

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

View example's code

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

Group 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.

View example's code

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

[data-duration]

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

View example's code

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

[data-interval]

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

View example's code

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

[data-delay]

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

View example's code

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

Animations

Standard Example

Parent Wrap

Group Wrap

[data-duration]

[data-interval]

[data-delay]