Create a simple, kick-ass loader with Anime.js
Building beautiful animations with physics
I’m a designer who loves exploring front-end technologies. A particular JavaScript animation library caught my eye recently — Anime.js. Going through the docs got me pretty excited to use it.
The theory behind the library is very simple: It’s fundamental physics. And yet, when certain CSS properties are combined, you can create some complex animations. To provide a designer’s analogy, it’s a library that contains the basic features of Adobe After Effects (keyframes, scaling, transformation, easing, delays, etc.). However, we all know the power that After Effects holds (just ask Andrew Kramer).
In this article, I’ll implement a simple loader (remember, less is more) animation that combines a few basic properties of Anime.js. The cool part is that the loading animation looks different each time the page is loaded (due to an added random delay).
The animation uses four basic properties:
- Change the position of each shape.
- Rotate each shape.
- Change the border-radius of each shape.
- Add a random delay to each shape.
Setting Up the Layout
Here, I’ve chosen to create squares — this is the obvious choice since the transition in border-radius will be more prominent. For the color palette, you’ll be spoilt for choice on Coolors or Muzli color palettes:
<div id="boxes">
<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
<div class="box four"></div>
</div>Each shape has its own class as we want to apply different effects to each at different times. Simple stuff.
Add links to your CSS and JS files and include a link to the Anime.js file:
<link rel="stylesheet" href="style.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
<script
src="main.js">
</script>
Breaking It Down
The real magic happens in your JavaScript. This is the skeleton in which all the Anime.js properties go:
anime ({/* animation */});playPause.play();
1. Changing the position of the shapes
The format of the Anime.js library is property: value(s). First, we want to achieve that downward motion of the shapes:
Here, targets specifies which div classes we want to animate (they can be CSS selectors, DOM elements, NodeList, Object, or Array). translateY is to displace the shapes along the Y-axis, as we want a downward motion. value and duration specify the coordinate (Y coordinate in this case) up to which the shape will get displaced and the time in milliseconds until which it’ll stay at that point, respectively. So here, each shape moves downward to a point (0,200) and holds for 500ms, then comes back to the initial position (0,0) for 800ms. You can play around with these numbers to feed your imagination. One tiny detail: Set loop to true so that the animation plays in a loop.
2. Rotating each shape
Rotation gives a feel of extreme movement and change. It’s also fun to look at in this case. Thus, adding to the previous animation, we get:
Simple. value specifies the number of turns you want the shape to rotate for.
3. Changing the border-radius
Morphing the square into a circle is the cool part. It’s simple too: Just change the border-radius of each square:
The alternate direction value changes the animation direction after every loop. The easing parameter is used to control the rate at which the animation is played for the duration it is active:
4. Adding a random delay
Finishing touches, folks. They say chaos is sometimes calming. It’s also cool (at times). Most loading pages/loaders are monotonous — they follow a pattern. This is partly why it gets super annoying when a page takes too long to load (aside from the obvious reason, of course, that it takes too long to load). A lot of websites nowadays are experimenting with innovative loading pages. Check these out. Even if just for a moment, it gives a factor of delight to the user.
The function() in the delay property returns a random integer within a specific range. Need I explain why loop is set to true? Figure it out.
Anime.js contains a rather nice attribute (elasticity) that allows you to add said elasticity to an animation. This means that the animation won’t stop abruptly once it’s done but oscillates instead. This results in the creation of very natural-looking movements. The higher the value, the higher the elasticity of the motion. This gives us the final, kick-ass animation:
Conclusion
Anime.js is a very lightweight animation engine — 14kb minified and only 6kb gzipped. It supports all modern browsers and can practically animate anything from CSS properties to arbitrary JavaScript values.
What I’ve created here is super simple and doesn’t do justice to all the capabilities of this library. So go experiment and create something kick-ass.
Cheers!
