Neoclassic Placebo Maker

    animate-prop

    1.0.0 • Public • Published

    animate-prop module size module gzipped size

    Single, dependency-free function to tween a property. Use that on canvas or anywhere else.

    This is a very simple and low-level function tween/animate/update a value over time. If you're looking for something that updates DOM elements directly, try the excellent but 60 times heavier TweenLite (+its CSS Plugin).

    Originally from the article "Animation with HTML5 Canvas", where you can see more examples.

    Usage

    // We'll animate the property x, starting from 5
    var obj = { x: 5 };
     
    // 10 is the final value that the property x will have after 1000 milliseconds
    animateProp(obj, 'x', 10, 1000);
     
    // use the object in your drawing loop
    context.moveTo(obj.x, 100);
    setInterval(function () {
        // progressively draw a line
        context.lineTo(obj.x, 100);
        context.stroke();
    }, 16); // don't use setInterval, it's just an example

    You can provide an easing function

    // see https://github.com/jaz303/easiness/blob/master/raw.js
    var easeInOutSine = function (progress) {
        return Math.sin(Math.PI/2 * progress);
    };
    var obj2 = { scale: 1 };
    animateProp(obj2, 'scale', 2, 300, easeInOutSine, function () {
        console.log('Eased animation done!')
    });

    Or just wait for it to be done, without an easing

    var obj3 = { opacity: 0 }; //            v--- easing:false = linear tween
    animateProp(obj3, 'opacity', 0.5, 300, false, function () {
        console.log('Linear animation done!')
    });

    Animate multiple properties with any duration

    var obj = { x: 5, y: 100 };
     
    animateProp(obj, 'x', 10, 1000);
    animateProp(obj, 'y', 300, 500);

    Sequence tweens

    var obj = { x: 5, y: 100 };
     
    animateProp(obj, 'x', 10, 1000, function () {
        animateProp(obj, 'y', 300, 500);
    });

    With browserify

    npm install --save animate-prop
    var animateProp = require('animate-prop');

    API

    animateProp(object, propertyName, finalValue, duration[, easing[, callback]])

    parameter description
    object Type: object, required
    The object with the property to tween
    propertyName Type: string, required
    The property key to animate (e.g. 'height')
    finalValue Type: number, required
    The final value that the property will have
    duration Type: number, required
    The duration of the tween
    easing Type: function or boolean, default: linear
    Given a number from 0 to 1, returns an eased number from 0 to 1 (optional)
    callback Type: function, default: none
    Function to be called when the tween is over (optional)

    Files

    Here's an explanation of the files included in this repo

    • index.js: source file, in ES6
    • dist/animate-prop.js: browser-ready file with AMD or a global variable called animateProp
    • dist/animate-prop.min.js: same as above, minified
    • dist/animate-prop.node.js: used by node/browserify with require('animate-prop')
    • dist/animate-prop.node.min.js: same as above, but minified, for byte counting only

    Dependencies

    No dependencies, but it needs window.requestAnimationFrame to be there (IE10+ or with polyfill)

    Easing functions are not included. Provide your own or use easiness

    Used on

    License

    MIT © Federico Brigante

    Install

    npm i animate-prop

    DownloadsWeekly Downloads

    64

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • fregante