Zanimation

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>