tweenjs/tween.js

★ 10,119TypeScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((tween.js))
    Core concept
      Numeric interpolation
      Time-based animation
      Easing functions
    Easing types
      Quadratic ease
      Cubic ease
      Bounce and elastic
    Features
      Chaining tweens
      Yoyo repeat
      Pause and resume
    Use with
      Three.js
      Canvas games
      DOM animations

mindmap root((tween.js)) Core concept Numeric interpolation Time-based animation Easing functions Easing types Quadratic ease Cubic ease Bounce and elastic Features Chaining tweens Yoyo repeat Pause and resume Use with Three.js Canvas games DOM animations

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Animate an object's position, opacity, or scale smoothly in a Three.js scene or canvas game loop.

USE CASE 2

Chain a sequence of animations that play one after another, such as a multi-step UI transition.

USE CASE 3

Apply a bounce or elastic easing curve to a UI element moving across the screen for a polished feel.

USE CASE 4

Control an animation loop manually, pausing and resuming tweens in response to user interactions.

Tech stack

TypeScriptJavaScript

Getting it running

Difficulty · easy Time to first run · 5min

You must provide your own animation loop (such as requestAnimationFrame), tween.js does not run its own loop.

In plain English

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.

Copy-paste prompts

Prompt 1

I'm using Three.js and want to animate a mesh moving from position (0,0,0) to (5,0,0) over 2 seconds with an ease-out curve using tween.js. Show me the code.

Prompt 2

Help me chain three tween.js animations so they play sequentially: fade in, move right, then fade out.

Prompt 3

I want to animate a CSS property on a DOM element using tween.js. How do I update the element on each tween update tick?

Prompt 4

Show me how to create a yoyo loop with tween.js so a value bounces back and forth indefinitely.

Prompt 5

Help me add a custom easing function to tween.js to create a spring-like effect for a UI button press.

Open on GitHub → Explain another repo

← tweenjs on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.