@arjent/simple-animation v0.1.0-beta

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.

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.

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.

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>

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
 });

Dependency

JQuery