Tiny Tween JS
Tiny Tween - A tiny (~5KB) JS Component for tweening values easily
Try it on Codepen
Installation
Using package managers
yarn add tiny-tween-js # OR npm install tiny-tween-js
And include in your JS
OR
Manually add as script
And get the exposed class:
Usage
const tweenOptions = target: document // 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 {} {}; // ES6 Usagelet tween = tweenOptions; // Vanilla Usagelet tween = tweenOptions; tween; // Play tween from current statetween; // Pause tween at current statetween; // Stop playing and resettween; // Set progress of tweentween // destroy instance to free memory
TODO
- Add seek method
- Chain tweens
Credits
Easing functions Taken from https://gist.github.com/gre/1650294