Efficient JavaScript Animation Engine – differential.js

Preview:

Description:

A lightweight, blazing fast JavaScript/HTML animation engine that makes it possible to animate anything within the document.

How to use it:

Install/download and import the compiled JavaScript ‘differential.js’ into the document.

<script src='dist/differential.js'></script>

Create a container where you want to display the animations.

<div id='demo'>
</div>

The example JavaScript to animate sizes & colors of an element.

var el = document.getElementById('test');
el.style.backgroundColor = 'blue';
el.style.width = '100px';
el.style.height = '100px';
function an() {
    el.D([{
            backgroundColor: 'red',
            border: '20px solid rgb(255,255,0)',
            width: '-=30px',
            height: '-=30px'
        },
        {
            backgroundColor: 'green',
            border: '5px solid rgb(255,0,0)',
            width: '+=30px',
            height: '+=30px'
        },
        {
            backgroundColor: 'blue',
            borderColor: 'rgb(0,255,0)'
        },
        {
            backgroundColor: 'rgb(255,0,255)',
            border: '20px solid blue'
        },
        {
            backgroundColor: 'rgb(0,255,255)',
            border: '5px solid rgb(255,0,255)'
        },
        {
            backgroundColor: 'rgb(255,255,0)',
            borderColor: 'rgb(255,0,255)',
        }
    ], 1000, 'swing', an);
}
an();

Possible options with default values.

easing: 'swing',
done: function () {},
queue: true,
specialEasing: null
step: null
progress: null
start: function () {},
duration: 400

API methods.

// Adds an easing effect.
D.addEase(name, easing);
// Pauses the animation
D.stop();
// Starts the animation
D.start();
// Clear
D.clear();

Changelog:

10/21/2018

• JS update