Author: | juliangarnier |
---|---|
Views Total: | 818 views |
Official Page: | Go to website |
Last Update: | April 28, 2020 |
License: | MIT |
Preview:

Description:
anime.js is a lightweight (~10kb minified) yet robust, high performance JavaScript animation library that works with CSS, Individual Transforms, SVG, DOM attributes and JS Objects.
Basic usage:
Include the core JavaScript library anime.js in the document and we’re ready to go.
<script src="anime.min.js"></script>
Create a custom animation on a specified element using anime
function.
var myAnimation = anime({ targets: ['.el-1', '.el2'], // more options here });
Full settings to help create custom animations.
// CSS Selectors: 'div','.thing','path' // DOM Element: document.querySelector('.thing') // Nodelist: document.querySelectorAll('.thing') // Javascript Object: {prop1: 100, prop2: 200} // Javascript Array: ['.thing-1', 'div'] targets: ['.el-1', '.el2'], // animaton duration in ms duration: 1000, // animation delay in ms delay: 0, // number or boolean loop: false, // autoplay on page load autoplay: true, // 'normal', 'reverse' or 'alternate' direction: 'normal', // easing function easing: 'easeOutElastic', // higher is stronger elasticity: 400, // number or boolean round: false, // callback functions begin: undefined, update: undefined, complete: undefined
API.
// play the animation myAnimation.play(); // pause the animation myAnimation.pause(); // restart the animation myAnimation.restart(); // advance in the animation myAnimation.seek();
Helpers.
// Return an array of all active animations objects anime.list; // Change all animations speed (from 0 to 1). // Will slow down all animations by half of their original speed anime.speed = .5; // Return the complete list of anime.js easing functions anime.easings; // Remove one or multiple targets from the animation. // Will remove all divs with the class '.item-2' anime.remove('.el-2'); // Get current valid value from an element. // Will return '100px' anime.getValue('div', 'translateX'); // Generate a random number between two numbers. // Will return a random number between 10 and 40 anime.random(10, 40);
Changelog:
v3.2.0 (04/28/2020)
- Add matrix and matrix3d parameters to allow the use of matrix values in CSS Transforms
- Change steps easing behaviour to match jump-start CSS timing function
- Fix (again) a bug where the animation will “flick” on reverse
v3.1.0 (07/27/2019)
- Add support for values with exponent
- Easing functions refactoring + added Bounce easing
- Bug fixes
v3.0.1 (01/17/2019)
- Direction parameter is now properly changed when animation reverse
01/12/2019
- Fix change callbacks
06/18/2018
- v2.2.0