Skip to content

yotamtal/tiny-tween

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

JS Component for tweening values easily

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published