Animating with AnimeJS

Shiv Karthik
Dec 15 · 4 min read

CSS animations help a website to look more professional. But CSS can sometimes be tedious to use. That’s where AnimeJS comes to the rescue! It’s a javascript library that helps simplify this process. Wanna know how it works?

Let’s find out how by implementing our own project in VSCode.

Setting up the project

Let us begin by creating our workspace folder ANIMEPROJECT. We’ll be using the HTML canvas and require 3 files index.html, main.js, and styles.css. AnimeJS is available as an npm package or as a CDN script tag. But we’ll use the script tag to keep the project simple.

Create an index.html with boilerplate HTML and then copy-paste the script-tag into the body element. Add a link tag to the style.css. Then add a script tag with the main.js as the source.

Now we need to download the VSCode extension Live Server. This dynamically updates our webpage whenever we make changes to any file.

Making a simple wave animation

Using the anime object we can manipulate multiple CSS properties of the div element such as translate, rotate, skew, etc. This reduces effort in the animating process. We only have to alter the height property.

We set the targets to the value of the elements on which we want to apply the animation effects too. In this case, it is the div element of the class container.

In the above code, we increase the height property to 75% of its original value in a duration of 400ms. After that, we decrease it back to 40% of its original value in a duration of 800ms.

  • ‘easing’ property helps define the rate at which the animation occurs. The rate may be linear, quadratic, or cubic.
  • ‘direction’ specifies how the animation progresses. It can occur in a ‘normal’, ‘reverse’ or ‘alternate’ manner.
  • ‘loop’ specifies if the animation should loop continuously or not

Since we are using multiple div elements in order to represent multiple columns this will require us to have multiple anime objects. The code will end up looking very messy!

This is where AnimeJS shines! We use a property called stagger that allows us to animate multiple elements with a single object.

And to make things simple let's add a button to pause and play the animation.

And with that, we’ve made a simple wave animation which we can play and pause.

Making simple UI components

SVG Animation

We are going to make a simple animation that changes from a 3 sided polygon to 4 sided to 6 sided and then back to 3.

The way we implement shape transition is by creating a shape with a fixed number of anchor points. For this, we will require 9 anchor points as shown below.

Creating frame in Inkscape

Now we export it to an SVG file and open in it our editor. If we navigate to the path tag we will find a property called d, this specifies the path to be drawn and consists of the anchor points we mentioned earlier.

SVG file attributes

Using the same project structure for previous animations we’ll add these values into our main.js file. We create an array of objects with the d values for each frame. Then pass them into our AnimeJS object.

This code loops over all the anchor points and allows for a smooth transition from one frame to the next. When we run the code we get the finished product.

Conclusion

References

AnimeJS: Documentation,

Learning Resources: Intro, SVGMorphing

Community Projects: Codepen

This article is published as a part of ‘JavaScripted’ under Spider Research and Development Club, NIT Trichy on a Web Wednesday!

Spider

Ideate. Innovate.

Spider

Spider, the Research and Development Club of National Institute of Technology, Tiruchirappalli is a group of people enthusiastic about technology and innovation.

Shiv Karthik

Written by

Spider

Spider, the Research and Development Club of National Institute of Technology, Tiruchirappalli is a group of people enthusiastic about technology and innovation.