Author: | knowledgecode |
---|---|
Views Total: | 191 views |
Official Page: | Go to website |
Last Update: | August 18, 2018 |
License: | MIT |
Preview:

Description:
velvet is a small (~6kb minified) JavaScript animation library that preferentially uses Web Animations API to create smooth, accelerated animations on DOM elements.
Features:
- Allows to play, pause and reverse the animation.
- Compatible with CSS3 animations (transforms and opacity only).
- Callback functions.
- Very fast and easy to use.
Basic usage:
Just import the velvet.js library into the html page and we’re ready to go.
<script src="/path/to/velvet.min.js"></script>
Create an animation on the target element ‘div’.
var div = velvet(document.getElementById('div')); div.weave({ translateX: 100 }, { durarion: 400 });
Customize the animation with CSS3 styles and options.
var w = v.weave({ translateX: 100, // (px) translateY: 200, // (px) translateZ: 300, // (px) Not supported in IE9 scale: 1.5, // Equivalent to { scaleX: 1.5, scaleY: 1.5 } scaleX: 2, scaleY: 2, scaleZ: 2, // Not supported in IE9 rotate: 30, // (deg) Equivalent to { rotateZ: 30 } rotateX: 45, // (deg) Not supported in IE9 rotateY: 60, // (deg) Not supported in IE9 rotateZ: 30, // (deg) Not supported in IE9 skewX: 45, // (deg) skewY: 45, // (deg) perspective: 400, // (px) opacity: 0.5 }, { delay: 1000, // (ms) durarion: 400, // (ms) easing: 'ease', // Any of 'linear', 'ease', 'ease-in', 'ease-out' and 'ease-in-out' oncancel: function () { // This is called when the animation is canceled. }, onfinish: function () { // This is called when the animation is finished. } });
Creates an animation other than CSS3 transform and opacity.
// t.weave(from, to, options, cb) var w = t.weave([0], [200], { delay: 1000, // (ms) duration: 400, // (ms) easing: 'ease', // Any of 'linear', 'ease', 'ease-in', 'ease-out' and 'ease-in-out' oncancel: function () { // This is called when the animation is canceled. }, onfinish: function () { // This is called when the animation is finished. } }, function (values) { // The scroll position will transition from 0px to 200px. window.scrollTo(0, values[0]); });
API methods.
// pauses the animation. w.pause() // resumes the paused animation, or replays the stopped animation. w.play() // goes to the end position of the animation, and stops. w.finish() // goes back to the start position of the animation, and stops. w.cancel() // reverses the current play direction, and starts to play the animation. w.reverse() // returns current play direction. (1: forward direction, -1: backward direction) w.direction()
Changelog:
08/18/2018
- separate bezier-easing from main module