Zanimation

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

You can add animation to any element using Sparrow'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 Sparrow's predefined animations like slide-down, described in zanimationEffects variable in js/custom/zanimation.js file. Example: 

<div data-zanim-xs="{" animation": "slide-down" }" 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="{" animation": "slide-left" }">
    <div data-zanim-xs="{" animation": "slide-down" }">...</div>
  </div>
</div>

Zanimation settings

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

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

See details about how to customize and use GreenSock here.

Responsive animation

To make the animation responsive, Sparrow 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="{" animation": "slide-down" }" data-zanim-sm="{" animation": "slide-up" }" data-zanim-md="{" delay": 0.1, "animation" : "zoom-in" }" data-zanim-lg="{" animation": "zoom-out" }" data-zanim-xl="{" animation": "blur-in" }" data-zanim-trigger="scroll">...</diV>