simple-animation

Simple Animation (sa) is a HTML interface implementation for Anime.js.

Scroll animation

Trigger animation when the element is entering the viewport. Each element can contain three different animation strategies how to interact with anime.js

Viewport vs element

Each element will has its own perspective of the client viewport matrix. Hereby you can determine for each animation element the viewport size and how the animation interacts with it's "own" viewport.

Viewport strategy

<element data-sa="an animation"></element>

The animation will be played when the element enters the viewport. When the element exit the viewport the animation will be played reverse.

Property	Input	Description	Default
data-sa-target	search string	Search string for children element(s) confirm the find method of JQuery.	none
data-timeline	string	In combination with data-sa-target you are able to define all targets within a timeline.	none
data-sa-repeat	true/false	Repeat the animation yes or no.	true
data-sa-duration	number	Overwrite the default duration of the animation.	Anime duration setting
data-vp-trigger	top/bottom	Which viewport side is considered as enter and exit.	bottom
data-vp-ofsset-top	pixel/percentage	How much "padding" the viewport has on the top.	0
data-vp-ofsset-bottom	pixel/percentage	How much "padding" the viewport has on the bottom.	0

Scroll strategy

<element data-sa-scroll="an animation"></element>

When scrolling into the viewport the element position within the viewport determine the position of the animation. When scrolling out the viewport the animation will be played reverse based on the element position within the viewport.

Property	Input	Description	Default
data-sa-target	search string	Search string for children element(s). Search is done by the JQuery find method.	none
data-timeline	string	In combination with data-sa-target you are able to define all targets within a timeline.	none
data-sa-duration	number	Overwrite the default duration of the animation.	Anime duration setting
data-scroll-trigger	top/bottom	Which viewport side is considered as enter and exit.	bottom
data-scroll-speed	number	Increase or decrease the animation duration speed based on the element scroll position in it's own viewport.	0
data-vp-ofsset-top	pixel/percentage	How much "padding" the viewport has on the top.	0
data-vp-ofsset-bottom	pixel/percentage	How much "padding" the viewport has on the bottom.	0

Anchor strategy

<element data-sa-anchor="an animation"></element>

When scrolling down and the element bottom pass by the anchor element the animation will be played. By scrolling up and the element bottom passes by the anchor element the animation will be played reverse.

Property	Input	Description	Default
data-anchor-target	search string	Search string for the anchor element. Search is done by the JQuery find method.	none
data-sa-duration	number	Overwrite the default duration of the animation.	Anime duration setting

How to initialise scroll animation?

$(document).ready(function () {
    $("[data-sa],[data-sa-scroll],[data-sa-anchor]").simpleAnimation();
});

Scroll to animation

Smooth scroll to animation.

<a href="#elementId">An anchor link</a>

Property	Input	Description	Default
data-sa-duration	number	Overwrite the default duration of the scroll to animation.	750
data-vp-ofsset-top	pixel/percentage	The top offset for where the scroll needs to stop.	0

How to initialise scroll to animation?

$(document).ready(function () {
    $("a[href^='#']").scrollToAnimation();
});

How to add your own Anime.js settings?

SimpleAnimation.addAnimation("fadeIn", {
    opacity: [0, 1],
    easing: 'linear',
    duration: 1500
}).addAnimation("fadeOut", {
    opacity: [1, 0],
    easing: 'linear',
    duration: 1500
 });

Testing

Plugin is tested against JQuery version 3.2 and Anime.js 3.1.0

External dependency

External dependencies which should be added by the developer itself

• Anime.js
• JQuery