# Tween.js — JavaScript and TypeScript Animation Engine

> A small, dependency-free tweening engine for smoothly interpolating numeric values over time, commonly used with Three.js and WebGL applications.

## Install

Save as a script file and run:

# Tween.js — JavaScript and TypeScript Animation Engine

## Quick Use
```bash
npm install @tweenjs/tween.js
```
```js
import TWEEN from '@tweenjs/tween.js';
const coords = { x: 0, y: 0 };
new TWEEN.Tween(coords)
  .to({ x: 300, y: 200 }, 1000)
  .easing(TWEEN.Easing.Quadratic.Out)
  .onUpdate(() => console.log(coords.x, coords.y))
  .start();

function animate() {
  requestAnimationFrame(animate);
  TWEEN.update();
}
animate();
```

## 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/

---
Source: https://tokrepo.com/en/workflows/asset-1d08c451
Author: Script Depot