|

Easily build engaging web animations with anime.js

Sometimes you just want to quickly add a small animation to a website or web app. Often CSS transitions and animations are simply not enough anymore. Of course, a huge library like GreenSock can be used here. However, this is quite large and extensive and therefore involves a relatively steep learning curve.
This is where anime.js comes into play - a small but nice animation library without dependencies.

In principle, making an animation with anime.js only requires one command:

anime({
  targets: ".my-target", // element being animated (can be a CSS selector or a DOM node)
  translateY: "300", // one of the parameters that will be animated (the only one here)
  duration: 1000, // duration of the animation
});

This command moves the target object with class .my-target 300 pixels to the right in one second.

Of course, there is also an option to run a callback function once the animation is complete:

anime({
  // remaining options
  complete: () => console.log("Animation is complete!"),
});

In order to prepare animations or to (re)establish a certain status after animations, CSS properties can also be set without animation:

anime.set(".my-target", { opacity: 0, scale: 0.1 });

In many cases, however, one does not want to carry out just one movement, but a sequence of movements, possibly also of different objects. This can be easily achieved with anime.timeline:

// Initialize the timeline object (optionally with default parameters).
// Initialize the timeline object (optionally with default parameters).
const tl = anime.timeline({ duration: 500, loop: true });

// first animation step
tl.add({
  targets: ".my-target",
  opacity: 0,
  scale: 0.1,
  rotate: "-15deg",
  duration: 1500, // duration of the animation step in ms
});

// second animation step
tl.add({
  targets: ".my-target",
  opacity: 1,
  scale: 1,
  rotate: 0,
  duration: 1000, // duration of the animation step in ms
});

The result then looks like this:

See the Pen anime.js Demo Bitmemory 1 by Hannes (@MrJeffrey) on CodePen.


To demonstrate what can be done with anime.js, I built this demo:

See the Pen animejs demo bit memory 2 by Hannes (@MrJeffrey) on CodePen.


For more information, see the anime.js website, the anime.js docs or the GitHub repo of anime.js.