Search⌘ K
AI Features
Home
Courses
Learn Three.js for 3D Computer Graphics

Animating with Tween.js

Explore how to use Tween.js to create smooth animations by tweening property values of 3D objects in Three.js. Learn how to define transitions, apply easing, and implement effects like repeat and yoyo to enhance dynamic 3D scenes. Understand how to update geometry attributes efficiently during animation for realistic movement.

We'll cover the following...

Tween.js

Let’s show how we can use an alternative way of modifying the properties of an object by using a tweening library.

Tween.js is a small JavaScript library that we can download and use to define easily the transition of a property between two values. All the intermediate points between the start and end values are calculated for us. This process is called tweening. For instance, we can use this library to change the xx position of a mesh from 10 to 3 in 10 seconds, as follows:

Javascript (babel-node-es2024)
const tween = new TWEEN.Tween({x: 10}).to({x: 3}, 10000)
  .easing(TWEEN.Easing.Elastic.InOut)
  .onUpdate( function () {
  // update the mesh
})

Alternatively, we can create a separate object (lines 1–3) and pass (line 4) ...