Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

nanotween

Package Overview
Dependencies
1
Maintainers
1
Versions
19
Issues
File Explorer

Advanced tools

nanotween

Tiny library for tweening

    0.8.0latest

Version published
Maintainers
1
Yearly downloads
4,679
increased by33.15%

Weekly downloads

Readme

Source

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

image

License

MIT

Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc