Author: | ThreeLetters |
---|---|
Views Total: | 45 views |
Official Page: | Go to website |
Last Update: | October 21, 2018 |
License: | MIT |
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