Smooth JavaScript DOM Animation Library – velvet

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