NanoTween
1.5 KB is quite enough for comfortable tweening
Included features
- Easing functions
- Chaining and groupping
- Yo-yo effect
- You can start/stop, play/pause, reverse on-fly or force set tweening progress
Advantages
- Ultra small size (only <1.5KB core, <2KB with all helpers, <3KB with all easings)
- Low-leveled API lets you easily adapt it to your needs
- Big list of ready-to-use easing functions.
- Easings and helpers are separated from core library so you can add only needed functions
Installation
npm install nanotween
yarn add nanotween
Countdown example
Simple countdown timer
import NanoTween from 'nanotween'
import { linear } from 'nanotween/easings'
const animate = () => {
requestAnimationFrame(animate)
Nanotween.update()
}
animate()
const el = document.getElementById('tween')
const duration = 10
const tween = new NanoTween()
.duration(duration * 1000)
.repeat(3)
.easing(linear)
.on('update', progress => {
el.innerHTML = (progress * duration).toFixed(2)
})
.on('complete', () => alert('Time is over'))
tween.start()
Complete guide
You can find complete guide and more examples on Wiki page
License
MIT