NanoTween
~1.5 KB is quite enough for full-featured and comfortable tweening
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
<script>
file
Advantages
- Ultra small size (only <1KB core, 1.5KB with all helpers, <2.5KB with all easings)
- Low-level 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
From NPM
npm install nanotween
yarn add nanotween
From unpckg
<script src="https://unpkg.com/nanotween@0.5.0/dist/index.js"></script>
<script src="https://unpkg.com/nanotween@0.5.0/dist/helpers.js"></script>
<script src="https://unpkg.com/nanotween@0.5.0/dist/easings.js"></script>
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
import NanoTween from 'nanotween'
import { linear } from 'nanotween/easings'
const animate = time => {
requestAnimationFrame(animate)
NanoTween.update(time)
}
animate(performance.now())
const duration = 10
const el = document.getElementById('tween')
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()
License
MIT