In this chapter, we will talk about appearing and leaving animations for the content elements. You can configure these animations with data attributes on each content item you want to animate.

Element Appearing Animations

For most elements, you can specify the animation to play on page loading or when an item appears in the viewport. There are a three types of those attributes:

  • data-appear - can be applied to a single element on the page.
  • data-split-appear - can be applied to the text, like a heading, to create an appearing effect with delay for each character, word, or line of text.
  • data-stagger-appear - can be applied to parent elements to animate children's items with some delay depending on the item position in the row.

Animations list

Let's take a look at the list of possible values for the appearing (and unloading, as well) animations:

  • fade-in
  • fade-up
  • fade-down
  • fade-left
  • fade-right
  • fade-up-left
  • fade-up-right
  • fade-down-left
  • fade-down-right
  • zoom-in
  • zoom-in-up
  • zoom-in-down
  • zoom-in-left
  • zoom-in-right
  • zoom-in-up-left
  • zoom-in-up-right
  • zoom-in-down-left
  • zoom-in-down-right
  • zoom-out
  • zoom-out-up
  • zoom-out-down
  • zoom-out-left
  • zoom-out-right
  • zoom-out-up-left
  • zoom-out-up-right
  • zoom-out-down-left
  • zoom-out-down-right

Additional Parameters

For each element with aniamtion attribute, you can also add the following optional attributes:

  • data-delay - defines a time (in milliseconds) to delay item animation start.
  • data-threshold - defines what part of an item should be in view before triggering an animation. It can hold the following values: 0, 0.25, 0.5, 0.75, 1.0, where 0 means immediate start when the first pixel of an item hits the viewport, and 1.0 means that animation starts only when an entire element is in the viewport.
  • data-duration - defines the duration of an animation in milliseconds.

Additional Parameters for Stagger appearing
  • data-stagger-delay - defines a time (in milliseconds) to delay animation between items in the same row.

Additional Parameters for Split appearing
  • data-split-by - defines a text split type to animate. It can hold the following values: char, word, line.
  • data-split-delay - defines a time (in milliseconds) to delay animation between items.

Leaving animation

Leaving animations are playing before unloading the page. In general, it is the same as the appearing animations, but instead of the appear word, it uses the unload word:

  • data-unload - can be applied to a single element on the page.
  • data-split-unload - can be applied to the text, like a heading, to create a leaving effect with delay for each character, word, or line of text.
  • data-stagger-unload - can be applied to parent elements to animate children's items with some delay depending on the item position in the row.

Unlike the appearing animation, the unloading animation has no additional options of its own and uses the appearing animation options.