Skip to main content

Similar to Tween.js, Anime.js is a javascript animation engine, and like Tween.js Anime.js can be used with Three.js to apply tweening animations to 3D objects. 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 Anime.js with Three.js.

Using Anime.js with Three.js is relatively straightforward. Firstly in the Javascript you need to import the library. In my example I have a copy of Anime.js in my own directory:

import anime from '../_js/anime.es.js';

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

// Anime Tweening
anime({
  targets: [icosahedron.position],
  y: 1.5,
  easing: "easeInOutSine",
  duration: 3000,
  direction: "alternate",
  loop: true
});
anime({
  targets: [icosahedron.rotation],
  y: 1, x: 2, z: 3,
  easing: "easeInOutSine",
  duration: 5000,
  direction: "alternate",
  loop: true
});
anime({
  targets: [icosahedron.scale],
  x: 1.25, y: 1.25, z: 1.25,
  easing: "easeInOutSine",
  duration: 2000,
  direction: "alternate",
  loop: true
});

One thing to note is that when using Anime.js with Three.js you do not need to call an update function in the main animation loop like you need to do with Tween.js.

Another thing I really like about using tweening engines with Three.js is that you can create animation sequences that apply tweens to different properties separately. In the example above my tween for the object position spans a duration of 3 seconds, while my tween for the object rotation spans 5. 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.

I am particularly interesting in creating non-linear type animations as I feel that this can add a somewhat organic / irregular quality to animating objects. Lately I have also been experimenting with creating tweening sequences that repeatedly tween to values within a random range, and I will most likely create a post about this too at some point.

I have also created a similar guide for using Tween.js with Three.js, just incase you’re interested.

Otherwise I hope this information is 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