tween.js

tween.js is a JavaScript and TypeScript library that handles a specific animation task: smoothly changing a number (or a set of numbers) from one value to another over a defined amount of time. If you want a box to slide from position 0 to position 300 over one second, you give tween.js the start point, the end point, and the duration, and it takes care of calculating every intermediate value in between. This kind of motion is called tweening, a term borrowed from traditional animation.

The library includes a collection of easing functions based on equations developed by Robert Penner, which are the industry-standard curves for making animations feel natural rather than mechanical. You can choose from dozens of curves such as quadratic ease-in, cubic ease-out, or bounce, or you can supply a custom function if none of the built-in options fit your needs.

tween.js is intentionally narrow in scope. It changes numeric properties on a plain JavaScript object and nothing else. It does not append CSS units like px or em, it does not interpolate colors, and it does not run its own animation loop. Those choices are left to the developer, which makes the library easy to drop into a Three.js scene, a canvas animation, a game loop, or any other existing system without conflict.

Features include chaining multiple tweens in sequence, repeating a tween a set number of times, reversing direction on repeat (called yoyo), pausing and resuming, and delaying start times relative to other tweens. Callbacks fire at key moments such as on each update or on completion, which is where you apply the computed values to whatever you are actually animating on screen. The library is available as an npm package and can also be loaded directly in a browser from a CDN.