How to Use Anime.js with Three.js

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

Launch Demo

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