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/[email protected]/dist/index.js"></script>
<script src="https://unpkg.com/[email protected]/dist/helpers.js"></script>
<script src="https://unpkg.com/[email protected]/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'

// 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()

License

MIT