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>