Anime.js Makes Animating CSS and SVG Easy

Anime.js is another one in an already impressive row of frameworks for animations. In contrast to all the other ones, anime.js does not only allow for the animation via CSS attributes. You can also alter SVG and HTML attributes with animations. It’s hard to image modern web design without the SVG format. This framework came at the right time.

Simple CSS Animations

Once you’ve implemented the JavaScript anime.js, creating animations based on CSS attributes becomes a rather easy thing to do. Call up “anime()”, to define one or multiple targets, meaning elements you want to animate. After that, define the CSS attributes that you want the animation to change.

anime({
targets: [document.getElementsByTagName("div")[0]],
translateX: "300px",
rotate: 180,
duration: 2000,
direction: "alternate",
loop: true,
elasticity: 600,
easing: "easeOutElastic"
});

In the example, “targets” is used to define a “<div>” element. You could also enter an ID instead. Two CSS attributes, “translateX” and “rotate”, are next to be animated. Subsequently, the duration and direction of the animation are determined using “duration” and “direction.” Here, the animation takes two seconds. Then, the animation is reversed. You are also able to make it play in a loop via “loop”.

During an Animation

Generally, this simple example is also possible without JavaScript, by using the “@keyframes” rules in conjunction with “animation”. However, anime.js adds the particular attribute “elasticity” that allows you to add said elasticity to an animation. The higher the value, the higher the elasticity of the motion. This means, that the animation won’t stop abruptly once it’s done, but oscillates instead. This allows users to create very natural looking movements.

30 Easing Effects

Just like classic CSS3 animations, anime.js gives you the option to add an easing to an animation. In total, there are 30 different easing effects available, which is significantly more than CSS3 offers.

When giving out “anime.easings” via the browser console, you’ll receive a list of all effects. Aside from the usual, in conjunction with “elasticity”, fascinating effects can be created.

SVG Path Animations

As mentioned before, animations with SVG attributes, like the “d” attribute of a path, are possible. This allows you to quickly realize an animation alongside a path.

To do so, first define a “<path>” element via SVG, as well as another element, like a “<div>” container, which is supposed to move alongside the path.

  targets: [document.getElementsByTagName("div")[0]],
translateX: anime.path(document.getElementsByTagName("path")[0]),
translateY: anime.path(document.getElementsByTagName("path")[0]),
rotate: anime.path(document.getElementsByTagName("path")[0]),
duration: 5000,
loop: true,
easing: "linear"
});

The element you want to animate is once again referenced via “targets”. Then, use “translatex”, “translateY”, and “rotate” to define the SVG path, alongside which you want the “<div>” element to be animated, with “anime.path()”.

SVG Morphing

Due to Google sounding the death knell for SMIL, animated form changes of SVG elements won’t be possible anymore, at least in future browser versions. However, anime.js lets you continue to create these animations with ease.

To do so, first, define an SVG path which you can later quickly morph into a different shape.

anime({
targets: [document.getElementsByTagName("path")[0]],
d: "M140,51.75A51.75,51.75,0,0,0,99.2,35.27a83,83,0,1,0,65.13,65.67A51.76,51.76,0,0,0,140,51.75Z",
duration: 1000,
loop: true,
direction: "alternate",
easing: "linear"
});

In the example above, an SVG path is referenced as “targets”. “d” is used to define a target path which determines the shape into which you want the “<path>” element to morph. An identical amount of points on the source and destination path is necessary. Otherwise, there will be messy effects instead of a pretty morphing.

Interactive Animations

Last but not least, anime.js also allows you to create interactive animations. For instance, there are ways to control the playback called “play()”, “pause()”, and “restart()”. You could also use “seek()” to skip to a certain point in the animation. For that, you need to either enter a time or percentage value.

On top of that, there are the attributes “begin”, “update”, and “complete”, letting you transfer a function. This function will then be executed at the beginning, after changes, or at the end of the animation, respectively.

Conclusion

Example on CodePen

anime.js has everything you need for simple as well as complex CSS and SVG animations. There’s a clear API reference with a couple of examples. Additionally, the framework runs under all standard browsers, including the Internet Explorer starting at version 10.

The code examples presented above can also be found on CodePen: