Have ideas to improve npm?Join in the discussion! »

    tiny-tween-js

    0.9.5 • Public • Published

    Tiny Tween JS

    Tiny Tween - A tiny (~5KB) JS Component for tweening values easily

    Try it on Codepen

    Tiny Tween Demo

    Installation

    Using package managers

    yarn add tiny-tween-js
     
    # OR 
     
    npm install tiny-tween-js

    And include in your JS

    import TinyTween from 'tiny-tween-js' // ES6

    OR

    Manually add as script

    <script src="//unpkg.com/tiny-tween-js"></script>

    And get the exposed class:

    new window.TinyTween

    Usage

     
    const tweenOptions = { 
        target: document.getElementById('example'), // Optional target for value changes
        from: {'style.opacity': 0}, // FROM values to tween
        to: {'style.opacity': 100}, // TO values to tween
        duration: 2000, // In Milliseconds
        loop: true,  // Loop tween
        yoyo: true, // Play forward and then reverse to inital value
        autostart: false,
        ease: 'easeInOutCubic', // Easing effect, default is Linear
        onProgress: function(values){},
        onComplete: function(){},
    };
     
    // ES6 Usage
    import TinyTween from 'tiny-tween-js'
    let tween = new TinyTween(tweenOptions);
     
    // Vanilla Usage
    let tween = new window.TinyTween(tweenOptions);
     
    tween.play(); // Play tween from current state
    tween.pause(); // Pause tween at current state
    tween.stop(); // Stop playing and reset
    tween.seek(0.50); // Set progress of tween
    tween.destroy() // destroy instance to free memory

    TODO

    • Add seek method
    • Chain tweens

    Credits

    Easing functions Taken from https://gist.github.com/gre/1650294

    Install

    npm i tiny-tween-js

    DownloadsWeekly Downloads

    1

    Version

    0.9.5

    License

    ISC

    Unpacked Size

    47.2 kB

    Total Files

    13

    Last publish

    Collaborators

    • avatar