Create a revealing animation with Anime.JS
Click to reveal!
👋 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:

Not this:
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 usenpm
orbower
like this:
$ npm install animejs
# OR
$ bower install animejs
Shall we, Anime?
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:

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-actionbutton
to go back.
Here’s the HTML code:
The CSS will have the following properties:
- The SVG’s
polymorph
class with afill
of any color you like, I’ve used #398f5a. - The call-to-action buttons will have similar properties with sufficient
margin
andpadding
. - For the
div
, we’ll shift it25% right
and settransform
totranslateY(-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.
- We’ll first set the
onClick
to our first call-to-action button namedbtn
. - Make a variable named
morphing
which targets ourpolymorph
class, add an array of twopoints
with values same as those in our SVG code. - We then set the
easing
toeaseOutQuad
, make the animationduration
to1200
seconds and don’t allow it toloop
over and over. - To make our
div
blip
visible after clicking thebtn
, we useanime()
,target
it to ourdiv
, set it’sopacity
to1
withtranslateY
set accordingly. - In order to make our
btn2
work, we use Anime.JS’s Promises feature. So let’s create avar
namedpromise
which uses themorphing
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 thebtn2
onClick
. - Finally, copy the code you wrote on 4th step, set back the
opacity
to0
and change thetranslateY
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.