Animating with AnimeJS
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
For this project, we’ll be using Visual Studio Code as our IDE. It contains several extensions that will help us.
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
We are going to make a simple wave-like animation using multiple columns. We’ll be using a div element to represent a column. This can be considered as a target element for the anime object.
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
Due to the simplicity and powerful nature of the AnimeJS library, it has many useful applications in UX/UI design. For example, if we wanted to implement a simple submit button then we can use AnimeJS to help make it more appealing.
SVG Animation
AnimeJS also has a special feature called SVG morphing. It allows for animating transitions between two SVG shapes. In order to implement this, we are going to need a vector graphics editor. We are going to use Inkscape because it's free and open-source!
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.
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.
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
UI design is crucial in order for a website to catch and retain the attention of its users. While the projects seen so far were simple. The possibilities of using this library are limited only by the imagination of the designer. Be sure to check out the documentation of AnimeJS as well as the awesome community projects available. Happy Learning!
References
Code: WaveAnimation, SubmitButton, ShapeAnimation
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!
