Tween.js — JavaScript and TypeScript Animation Engine

Introduction

Tween.js is a tweening engine that smoothly transitions numeric properties from one value to another over a specified duration. It is widely used alongside Three.js for camera movements, object transitions, and procedural animations. The library handles easing, chaining, repeating, and grouping of tweens.

What Tween.js Does

• Interpolates any numeric property on a JavaScript object over time
• Provides 30+ built-in easing functions (Linear, Quadratic, Cubic, Elastic, Bounce, etc.)
• Chains tweens sequentially so one starts when another ends
• Supports repeat, yoyo (ping-pong), and delay for looping animations
• Groups tweens for independent update cycles in complex scenes

Architecture Overview

Tween.js stores the start values, end values, duration, and easing function for each property being animated. On each call to TWEEN.update(time), it calculates the elapsed fraction, applies the easing function to get an interpolation factor, and sets each property to start + (end - start) * factor. Tweens are stored in a global group by default, but custom groups allow separate update loops. Chaining is implemented by starting the next tween's clock when the current one completes.

Self-Hosting & Configuration

• Install via npm under the @tweenjs/tween.js scope
• Call TWEEN.update() inside your animation loop (requestAnimationFrame or a renderer loop)
• Use new TWEEN.Group() to isolate tweens from the global group
• Set .repeat(Infinity).yoyo(true) for ping-pong looping animations
• Pass a custom time argument to update() for deterministic playback

Key Features

• 30+ easing functions covering all standard curves plus elastic and bounce
• Chainable API: .to().easing().delay().repeat().yoyo().onUpdate().start()
• Tween groups for managing independent animation timelines
• TypeScript definitions included in the package
• Tiny footprint (~4 KB minified) with zero dependencies

Comparison with Similar Tools

• anime.js — animates DOM/CSS/SVG directly; Tween.js operates on plain objects, ideal for WebGL and Three.js
• GSAP — feature-rich timeline engine; Tween.js is minimal and focused on numeric interpolation
• mo.js — shape and burst primitives; Tween.js is a lower-level value interpolation engine
• D3 transitions — tied to D3 selections; Tween.js is standalone and framework-independent

FAQ

Q: How do I use Tween.js with Three.js? A: Tween the object's position, rotation, or scale properties and call TWEEN.update() in your render loop.

Q: Can I tween colors? A: Tween.js interpolates numbers. Decompose colors into RGB components, tween each, and reconstruct the color in onUpdate.

Q: What happens if I start a new tween on the same object? A: Both tweens run independently. Call .stop() on the previous tween first to avoid conflicts.

Q: Is Tween.js suitable for DOM animations? A: It can drive DOM animations via onUpdate, but libraries like anime.js or GSAP handle DOM specifics (units, transforms) more conveniently.

Sources

• https://github.com/tweenjs/tween.js
• https://tweenjs.github.io/tween.js/