NanoTween

~1.5 KB is quite enough for full-featured and comfortable tweening
!image

Is it small enough?

I made some researches with bundlephobia and size-limit and here's what I can say

> For now, NanoTween core is the smallest tweening core on NPM

``
library ¦ size
-----------¦-------
gsap ¦ 37.0 KB
moofx ¦ 7.4 KB
es6-tween ¦ 6.0 KB
animejs ¦ 5.7 KB
kute ¦ 5.6 KB
tweenr ¦ 4.7 KB
shifty ¦ 4.2 KB
kute ¦ 3.4 KB
tweenjs ¦ 2.9 KB
tweeno ¦ 2.8 KB
anim ¦ 1.1 KB
nanotween ¦ 0.8 KB
`

Included features

* Easing functions
* Tweening delays
* Chaining and groupping
* Yo-yo effect
* You can start/stop, play/pause, reverse on-fly or force set tweening progress
* Also has IIFE build to include as


`

NanoTween is available as is.
Helpers are available in ntHelpers global variable, easings - in ntEasings.
If you don't need helpers or easings, you can include only core script.

Complete guide

You can find complete guide and live demos on wiki

Countdown example

Simple countdown timer

`javascript
import NanoTween from 'nanotween'
import { linear } from 'nanotween/easings'

// Start tweening process
const animate = time => {
requestAnimationFrame(animate)
NanoTween.update(time)
}
animate(performance.now())

// Duration in seconds
const duration = 10

// Element
const el = document.getElementById('tween')

// Create tween object
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'))

// Start timer
tween.start()
``

!image

License

MIT