Create a revealing animation with Anime.JS

Click to reveal!

I’m sure the reveal will be better than this. GIF credits: GIPHY

👋 JavaScript!

Yeah, from the past couple of weeks I’m going nuts over the animation. Be it via CSS or an extension. I’ve been keeping JS aside from quite some time. Now is the perfect time to start with the most beloved language of web developers to create awesome animations. This time, we’re gonna use a JS library called Anime.JS.

What will I make?

This:

Better than the above reveal?

Not this:

Uh. That was a bad reveal… GIF credits: GIPHY

What is Anime.JS❔

According to its documentation listed on GitHub,

Anime is a lightweight JavaScript animation library. It works with any CSS properties, individual CSS transforms, SVG or any DOM attributes, and JavaScript Objects.

Also, it has many useful features like:

• Chaining multiple animation properties with Keyframes.
• Synchronizing multiple instances together with Timeline.
• Play, pause, restart, seek animations or timelines with Playback controls.
• And many more.

With all these features in mind, let’s dive in!

What will I need? 🛠️

• H̸a̸m̸m̸e̸r̸ ̸a̸n̸d̸ ̸w̸r̸e̸n̸c̸h̸
• Your already wonderful HTML, CSS and JS skills.
• A text editor (I’ll be using VS Code just because for my last tutorial on CSS animation, I used…well...Microsoft made a great editor!)
• The Anime.JS library. Head over to its GitHub repo and download the anime.min.js file which I’ll be using here. Alternatively, you can use npm or bower like this:

$ npm install animejs
# OR
$ bower install animejs

Shall we, Anime?

Watched Tom Hank’s Robert Langdon series?

First things first, we will be using the morphing animation to our polygon which I’ve made in Adobe Illustrator. So, all you need to do is make a polygon illustration in your favorite vector graphic editor (that must have export to SVG option) with a starting and an end point. I’ve used Ilustrator’s Anchor Point Tool for this. After you’re done with your design, export it to SVG and get its code (it’s really easy to get it via Illustrator so I highly recommend you to use it). We only need the <polygon> tag with <svg> enclosing it with a viewBox. Here’s an example:

This was not written by me. It was entirely done by Illustrator.

Next, take the anime.min.js file which you downloaded and add it to your project. Make the usual index.html and style.css files. Our HTML will consist of these:

• A button for click-to-action.
• The svg code.
• A div which will have a heading, and one or two paragraph lines along with another call-to-action button to go back.

Here’s the HTML code:

The CSS will have the following properties:

• The SVG’s polymorph class with a fill of any color you like, I’ve used #398f5a.
• The call-to-action buttons will have similar properties with sufficient margin and padding.
• For the div, we’ll shift it 25% right and set transform to translateY(-800px).

Here’s the complete CSS code:

It’s time to use Anime.JS! Let’s include the anime.min.js in our HTML and start our <script> tag.

1. We’ll first set the onClick to our first call-to-action button named btn.
2. Make a variable named morphing which targets our polymorph class, add an array of two points with values same as those in our SVG code.
3. We then set the easing to easeOutQuad, make the animation duration to 1200 seconds and don’t allow it to loop over and over.
4. To make our div blip visible after clicking the btn, we use anime(), target it to our div, set it’s opacity to 1 with translateY set accordingly.
5. In order to make our btn2 work, we use Anime.JS’s Promises feature. So let’s create a var named promise which uses the morphing variable used above, take .finished() and .then(). In this, we’ll create a reversal of the above animation by changing the last value used in the second array to the initial values of the polygon. Next, wrap all of the ‘Promise’ code inside the btn2 onClick.
6. Finally, copy the code you wrote on 4th step, set back the opacity to 0 and change the translateY to -800.

If you’ve missed a point above you can always look at the JS code given below:

Where to next? 🤔

Anime.JS doesn’t stop here. It contains a variety of cool animations like Node List, JavaScript Object, SVG Attributes, Direction Alternate, Basic Timeline and more! You should definitely check out its docs and try to play around.

Here is a great tutorial video:

All credits to the design of this webpage goes to Gary Simon of Coursetro. Make sure you see his awesome videos for UI design and web development.

Liked this story? Feel free to clap and motivate me to write more and better. Did I missed something? Any suggestions? The comment box below serves the exact purpose!

✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.