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.

Open Demo in New Tab

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 previous 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.

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. Otherwise you can find me 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

Lustrous

Lustrous

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

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