Zanimation

You can add animation to any element using Reign's built-in zanimation by adding data-zanim-xs!={} and data-zanim-trigger='scroll'. This will add the default animation to an element. Example:

<div data-zanim-xs="{}" data-zanim-trigger="scroll">...</div>

To trigger the animation, we use data-zanim-trigger='scroll' that checks if the targeted dom element is in the viewport or not. If the element is in the viewport, it triggers the animation.

Predefined effects#

You can use from one of Reign's predefined animations like slide-down, described in zanimationEffects variable in js/custom/zanimation.js file. Example:

<div data-zanim-xs="{&quot;animation&quot;: &quot;slide-down&quot;}" data-zanim-trigger="scroll">...</div>

List of predefined animations are:

• default
• slide-down
• slide-left
• slide-right
• zoom-in
• zoom-out
• zoom-out-slide-right
• zoom-out-slide-left
• blur-in

Nested animation (Grouping)#

If you want to animate an element within another animated element, use data-zanim-timeline and data-zanim-trigger='scroll' in a parent element. Example:

<div data-zanim-timeline="{}" data-zanim-trigger="scroll">
  <div data-zanim-md="{&quot;animation&quot;: &quot;slide-left&quot;}">
    <div data-zanim-xs="{&quot;animation&quot;: &quot;slide-down&quot;}">...</div>
  </div>
</div>

Zanimation settings#

You can use any css properties along with GreenSock settings to animate an element. Example:

<div data-zanim-xs="{&quot;delay&quot;: 0.1, &quot;animation&quot;: &quot;slide-down&quot;}" data-zanim-trigger="scroll">...</div>
<div data-zanim-xs="{&quot;delay&quot;: 0.1, {&quot;from&quot;: {&quot;opacity&quot;: 0, &quot;y&quot;: 70}, &quot;to&quot;: {&quot;opacity&quot;: 1, &quot;y&quot;: 0}, &quot;ease&quot;: &quot;CubicBezier&quot;, &quot;duration&quot;: 0.8, &quot;delay&quot;: 0}}" data-zanim-trigger="scroll">...</div>

See details about how to customize and use GreenSock here.

Responsive animation#

To make the animation responsive, Reign uses the data-zanim-{size}, where {size} is xs, sm, md, lg or xl, just like Bootstrap's responsive breakpoints. Each data-zanim-{size} can have a different animation settings. Example:

<div data-zanim-xs="{&quot;animation&quot;: &quot;slide-down&quot;}" data-zanim-sm="{&quot;animation&quot;: &quot;slide-up&quot;}" data-zanim-md="{&quot;delay&quot;: 0.1, &quot;animation&quot;: &quot;zoom-in&quot;}" data-zanim-lg="{&quot;animation&quot;: &quot;zoom-out&quot;}" data-zanim-xl="{&quot;animation&quot;: &quot;blur-in&quot;}" data-zanim-trigger="scroll">...</div>