The theme provides basic element animations that you can activate by applying specific class names to them.

.xx-anim : Enable the animation trigger.

.xx-fadein : Make the element fade-in when it arrives in viewport.

.xx-slideleft-00 : Make the element slide from the left side. The 00 is the number in pixels that will be translated from.

.xx-slideright-00 : Make the element slide from the right side. The 00 is the number in pixels that will be translated from.

.xx-slidetop-00 : Make the element slide from the top side. The 00 is the number in pixels that will be translated from.

.xx-slidebottom-00 : Make the element slide from the bottom side. The 00 is the number in pixels that will be translated from.

.xx-delay-00 : Delay the current element's animation. The 00 is the number in milliseconds.

.xx-text : Enable SplitText and ScrollTrigger libraries for this element.

Examples

Here is an element that when it reaches the viewport, it will fade-in from bottom. Run

<div class="xx-anim xx-fadein xx-slidebottom-60"></div>

Here is another example that will stagger-animate the next three elements. Run

<div class="xx-anim xx-fadein xx-slidebottom-60"></div>
<div class="xx-anim xx-fadein xx-slidebottom-60 xx-delay-100"></div>
<div class="xx-anim xx-fadein xx-slidebottom-60 xx-delay-200"></div>

In the next example, we're going to use SplitText and ScrollTrigger libraries by Gsap, to animate some text lines.

THIS IS A BIG TITLE ANIMATED AS AN EXAMPLE

<h1 class="xx-text xx-anim xx-fadein">THIS IS A BIG TITLE ANIMATED AS AN EXAMPLE</h1>

If you want animations to persist after scrolling (elements stay visible once revealed), you can use the hook below. There is also the threshold option which determines what percentage of the element must be visible within the viewport before the animation triggers. Range is 0 to 1:

window.customAnimConfig = {
  persistOnScroll: false,
  threshold: 0.1
};