Zanimation

These modular elements can be readily used and customized in every layout across pages.

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>

Thank you for creating with Reign © 2019| v4.0.1

Made withby Themewagon