Skip to main content

Tween.js is a javascript animation engine that is typically used with Three.js to apply tweening animations to 3D objects. Tween.js is also commonly used to handle 2D web based animations. For me the greatest advantage of using a tweening library with Three.js is that makes it really easy to create animation tweens with properties like easing and back and forth looping etc. Above is a basic demo using Tween.js with Three.js. I have also written a similar guide that shows you how to use a different animation engine – Anime.js with Three.js, just in case you’re interested.

There are plenty of examples of using Tween.js and Three.js available, so the following is really just my own simplified notes.

Firstly, of course within the JavaScript you need to import the library. In the following example, just to make everything work standalone I am linking to the script via a CDN:

import { TWEEN } from 'https://unpkg.com/three@0.139.0/examples/jsm/libs/tween.module.min.js';

Now here is an excerpt from the code where I have created an icosahedron and applied different tweens to it for position, rotation, and scale:

// Tween.js Tweening
new TWEEN.Tween(icosahedron.position)
  .to( { y:1.5 }, 2000)
  .yoyo(true)
  .repeat(Infinity)
  .easing(TWEEN.Easing.Cubic.InOut)
  .start()
;
new TWEEN.Tween(icosahedron.rotation)
  .to({ y: "-" + (Math.PI/2) * 8}, 6000) // Math.PI/2 = 360degrees x8 rotations
  .delay(1000)
  .repeat(Infinity)
  .easing(TWEEN.Easing.Cubic.InOut)
  .start()
;
new TWEEN.Tween(icosahedron.rotation)
  .to({ x: "-" + (Math.PI/2) * 9}, 14000)
  .repeat(Infinity)
  .easing(TWEEN.Easing.Cubic.InOut)
  .start()
;
new TWEEN.Tween(icosahedron.scale)
  .to( { x:1.25, y:1.25, z:1.25 }, 5000)
  .yoyo(true)
  .repeat(Infinity)
  .easing(TWEEN.Easing.Cubic.InOut)
  .start()
;

In this example I applied two different tweens for rotation on the x and y axis’. Unlike when applying tweens using Anime.js, when using Tween.js the rotational values need to be in radians (hence the PI equation).

And lastly, when using Tween.js you need to include an update in the animation loop. Here is a copy of the animation loop for this demo:

function animation(time) {
  controls.update();
  renderer.render(scene, camera);   
  TWEEN.update();
}

As I mentioned in my other article about using Anime.js with Three.js, one thing I really like about using tweening engines with Three.js is that you can create animation sequences that apply tweens to different properties of a single object separately. In the example above my tweens span different durations. By tweening these properties separately and with different durations I am able to create an animation sequence that is not linear. – The entire animation doesn’t have a set form that repeats itself, rather the different properties constantly combine with each other in different ways.

Also it’s probably worth mentioning that currently I am leaning towards Anime.js as my preferred animation framework for using with Three.js. The main reason being that as identified above the code is a bit more streamlined and easier to work with. Also recently I found I was able create animations which looped between randomly generated values in Anime.js, whereas I couldn’t quite pull off the same thing with Tween.js.

Otherwise I hope this information if useful for you. 🙂


If you would like to stay in the loop when I publish new content your best bet is to join my mailing list, as I don't tend to post my tutorials and articles to social media. Otherwise you can always follow my work on Youtube, Twitter, Instagram, Reddit, Artstation, LinkedIn, and Behance.

I would love to make it my thing to create high quality tutorials that are 100% free with no strings attached.

If this tutorial was useful for you please consider showing your appreciation and offering your support. It will make my day!

Buy me a coffee

Filed under:
Three.js

Similar Tutorials:

All Tutorials

Featured Projects

Robot Animations

Robot Animations

An interactive 3D demo of a game character model with motion capture actions, created with Three.js.

Artefact 007

Artefact 007

Generative interactive 3D artwork created using Three.js.

The Partition

The Partition

A study of movement, materials, and lighting using Three.js.

Lustrous

Lustrous

3D digital artwork / animation created with three.js.

Simple Counter

Simple Counter

A simple counting tool for counting people and keeping track of numbers.

About Me

Hi, I'm Henry Egloff - a multimedia artist, designer, and coder, based in Byron Bay Australia. I create digital art, design and code apps, write articles, and develop tutorials.

I specialise in designing and building dynamic and interactive media with languages like HTML, CSS, PHP, and Javascript, and using tools like Three.js, Blender, Adobe, and Unity.

I love working creatively and helping people learn.

I'm currently available for freelance / contract projects and online tuition roles. Learn more about me or say hello at contact@henryegloff.com.

Henry Egloff
Twitter Twitter 2 Facebook Linked In Instagram Codepen Behance Youtube Opensea Heart Dark Mode Light Mode