A simple lightweight JavaScript animation library with a simple, yet powerful API. -- Anime.js docs
Fun Fact: This site's landing page actually uses the anime.js library! Try it out for yourself! Be sure to be logged out and go to https://socialrumbles.com/. You will see this cool bouncing and text animation, which was built in anime.js. Want to start making you own animations? Well let's get started than! Today I will be teaching you this powerful tool that can help animate your websites. In this tutorial we will start simple learning the basics of the api and then make a more complicated animation. You can check out this animation we will be making here, and the github repo is here.
Getting Started
In order to make our animation, we need to get over the basics. First thing you need to do is open up an html text editor. If you do not have a html text editor, I reccomend Pycharm, or W3Schools for people who want to do it online. Now let's get started! In your document, copy this code:
<!DOCTYPE html>
<html>
<head>
<style></style>
</head>
<body>
<div class="overlay">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script></script>
</body>
</html>
There isn't much in the code above. Basically what I've done is setup a little anime.js template. In the <style> tags in the head of the code, we will put our css. In the <div class="overlay"> section, we will put our html code and tags. At the end of our body you will see script tag with a src. This src is the code that links anime.js, and is what makes anime.js work. After this script tag, there is an empty script tag, where we will put our anime.js code.
Enough explaining, let's do something!
<!DOCTYPE html>
<html>
<head>
<style>
.circle {
height: 50px;
width: 50px;
border-radius: 50%;
background-color: red;
}
</style>
</head>
<body>
<div class="overlay">
<div class="circle"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script></script>
</body>
</html>
Ok so above I've made a simple circle. Using this circle, we will explore the anime.js API. All the code in this section will be placed in the last <script> tag. The first thing we need to do with anime.js is to actually select the element. Add this code in the aforementioned tag:
anime({
targets: '.circle'
})
This doesn't do anything just yet. All this does is select any element with the class "circle", which is the div we made above. Now let's try actually animating this circle:
anime({
targets: '.circle',
translateX: 250
})
As showing in the code above, we translate the div 250 pixels on the x axis, which causes it to move to the right. Let's try moving it down now:
anime({
targets: '.circle',
translateX: 250,
translateY: 250
})
We can also change the translates to be negative, which would make the div go the opposing way. Now this animation is quite fast. What if we wanted to make this animation slower? We can use the duration property like so:
anime({
targets: '.circle',
translateX: 250,
translateY: 250,
duration: 10000
})
In this code, we make the duration of the animation for 10 seconds (10000 milliseconds is equal to 10 seconds). Another anime.js property you need to know for this tutorial is the delay property which obviously delays the function:
anime({
targets: '.circle',
translateX: 250,
translateY: 250,
duration: 10000,
delay: 1000
})
Another big anime.js topic is the easing property. This property tells how the animation should speed up and slow down. For example, linear (default) will make it go at a constant speed, while using something like easeInOutSine will make it slow down and speed up to sine:
anime({
targets: '.circle',
translateX: 250,
translateY: 250,
duration: 10000,
delay: 1000,
easing: 'easeInOutSine',
})
And the last thing we should know is when the animation ends. We can do this by using complete():
anime({
targets: '.circle',
translateX: 250,
translateY: 250,
duration: 10000,
delay: 1000,
easing: 'easeInOutSine',
complete: function(){
alert('anime over');
}
})
Actually Animating Something Cool
Phew... that was a lot. Now that we've gotten over the basics, let's actually start animating! You can check out this animation here, and the github repo is here. Let's start! Take the template I have shown before and add this css file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Dheirya/anime-js-example/main.min.css">
</head>
<body>
<div class="overlay">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script></script>
</body>
</html>
The overlay is where I will put my html code, and the css is the css I will use. Inside the overlay div add this:
<div class="bg" id="bg">
<div class="mon mountain mountain-one">
<div class="mountain-top">
<div class="mountain-cap-1"></div>
<div class="mountain-cap-2"></div>
<div class="mountain-cap-3"></div>
</div>
</div>
<div class="mon mountain-two">
<div class="mountain-top">
<div class="mountain-cap-1"></div>
<div class="mountain-cap-2"></div>
<div class="mountain-cap-3"></div>
</div>
</div>
<div class="mon mountain-three">
<div class="mountain-top">
<div class="mountain-cap-1"></div>
<div class="mountain-cap-2"></div>
<div class="mountain-cap-3"></div>
</div>
</div>
<div id="cloud" class="cloud"></div>
</div>
<h2 class="message" id="mess">
All was peaceful in the Mountain Town of Ti Chu...
</h2>
This is our basic html. The bg is our background for the scene, and the <h2> is our narration. Right underneath that paste this code:
<img src="https://res.cloudinary.com/dpoer5oaq/image/upload/v1629667297/58e9117beb97430e819064d6_ohlmkk.png" id="rocket" />
<span id="expl" style="display:none">
<img src="https://i.gifer.com/origin/d7/d7ac4f38b77abe73165d85edf2cbdb9e_w200.gif" class="exp" id="exp-0"/>
<img src="https://i.gifer.com/origin/d7/d7ac4f38b77abe73165d85edf2cbdb9e_w200.gif" class="exp-1" id="exp-1"/>
<img src="https://i.gifer.com/origin/d7/d7ac4f38b77abe73165d85edf2cbdb9e_w200.gif" class="exp-2" id="exp-2"/>
<img src="https://i.gifer.com/origin/d7/d7ac4f38b77abe73165d85edf2cbdb9e_w200.gif" class="exp-3" id="exp-3"/>
</span>
<img src="https://res.cloudinary.com/dpoer5oaq/image/upload/q_10,f_auto/v1629671113/alien-building-28-removebg-preview_ubagnl.png" id="ahouse" />
<img src="https://res.cloudinary.com/dpoer5oaq/image/upload/q_10,f_auto/v1629671307/industry-service-diagram-computer-network-area-removebg-preview_wkyuw8.png" id="acar" />
<img src="https://res.cloudinary.com/dpoer5oaq/image/upload/q_10,f_auto/v1629671284/fartonic-tree_hsl5y5.png" id="abarn" />
<img src="https://res.cloudinary.com/dpoer5oaq/image/upload/v1629667889/d5f28f5ef5fce552d19c28ab33359695_3f4bcc868c8da936c8952184c191250e-removebg-preview_soc2qm.png" id="alien" />
<img src="https://res.cloudinary.com/dpoer5oaq/image/upload/q_10,f_auto/v1629665476/3VpHUK3Ps8NOpYzhIKkOFbndzjnlXx8vTzHUUuGjXLRCr-7H2xMrupWkEvwTObILUlraxcp7lQRK8zYOiPrRPAlLbL-kpqIRwZ1PcTmxGIqlTXvFGXyuxxQWhlAVGvqvToquOPJSoWqpWY1kPRcyydVUiJEa4Q_ubh4mh.png" id="house" />
<img src="https://res.cloudinary.com/dpoer5oaq/image/upload/q_10,f_auto/v1629665606/519-5191350_car-clip-art-pictures-cartoon-transparent-background-car_kvyp6c.png" id="car" />
<img src="https://res.cloudinary.com/dpoer5oaq/image/upload/q_10,f_auto/v1629666636/905-9054144_jpg-transparent-stock-euclidean-vector-animal-element-cartoon_e1d9ex.png" id="barn" />
<img src="https://res.cloudinary.com/dpoer5oaq/image/upload/q_10,f_auto/v1629662090/TALJ82brI5lgQTdM67U0z7Q43J_-QiAHjX1CC6gwZZSoCEazbSivZ4ZjKQbUzr9FM7Bf2r3uQbue1oCg_QwIG6VoTMP6wzGl-5qhc8s_bjtgd0.png" id="sun">
<img src="https://res.cloudinary.com/dpoer5oaq/image/upload/q_10,f_auto/v1629662199/580b585b2edbce24c47b26be_eyefa7.png" id="grass">
<img src="https://res.cloudinary.com/dpoer5oaq/image/upload/q_10,f_auto/v1629662165/769-7698690_illustration-showing-a-group-of-people-side-by_smovol.png" id="people" />
These are all the images that are used in the scence. Now time to animate this in js! Copy this code into the script after the anime.js linking:
setTimeout(function() {
document.getElementById("mess").innerHTML = "Until the sun fell from the sky...";
height = screen.height;
xR = height * 1.3;
width = screen.width;
yR = width / 2;
let animation = anime({
targets: '#sun',
translateX: xR,
delay: 300,
translateY: yR,
duration: 1500,
width: 300,
height: 300,
easing: 'easeInOutSine',
complete: function() {
// copy next code here
}
})
}, 2000);
Now we have a sun falling animation! What we do in the code above is we wait 2 seconds so the viewer can read the narration and we than animate the sun following using anime.js. We change the narration text and calculate the screen width and height to see where to translate the sun to. Now we need the people and buildings to explode from the sun. Copy this code into the complete function above:
document.getElementById("mess").innerHTML = "BOOM!!!";
document.getElementById("expl").style.display = "block";
document.getElementById("bg").classList.add("bg-org");
document.getElementById("grass").src = "https://res.cloudinary.com/dpoer5oaq/image/upload/q_10,f_auto/v1629664124/399-3992238_ground-silhouette-png-black-ground-silhouette_jlrcbs.png";
document.getElementById("sun").style.display = "none";
document.getElementById("cloud").style.display = "none";
var circle = anime({
targets: '#people',
translateX: -xR - 400,
translateY: -yR - 400,
rotate: 360,
duration: 1500,
easing: 'easeInOutSine',
complete: function() {
document.getElementById("exp-3").style.display = "none";
}
});
var car = anime({
targets: '#car',
translateX: xR + 400,
translateY: -yR - 400,
rotate: 360,
duration: 1000,
easing: 'easeInOutSine',
complete: function() {
document.getElementById("exp-0").style.display = "none";
}
});
var house = anime({
targets: '#house',
translateX: xR + 300,
translateY: -yR - 300,
rotate: 360,
duration: 2000,
easing: 'easeInOutSine',
complete: function() {
document.getElementById("exp-1").style.display = "none";
}
});
var barn = anime({
targets: '#barn',
translateX: -xR - 200,
translateY: -yR - 200,
rotate: 360,
duration: 3000,
easing: 'easeInOutSine',
complete: function() {
// copy next code here
}
})
Ok that was a lot of code. Lemme explain. What we are doing in this code is taking the variables that are the window screen width/height and we translate the 4 objects on the ground that would've blown up. To make it seem more realistic we rotate these objects in the air by using the rotate object, which goes to 360 degrees. The completion functions hide the explosion gifs, and the last explosion will continue the story. In the last completion function, copy this code:
document.getElementById("exp-2").style.display = "none";
setTimeout(function() {
var divsToHide = document.getElementsByClassName("mon");
for (var i = 0; i < divsToHide.length; i++) {
divsToHide[i].style.display = "none";
}
document.getElementById("mess").innerHTML = "Is anyone there??? Guess Not...";
setTimeout(function() {
document.getElementById("mess").innerHTML = "Thousands of years later...";
setTimeout(function() {
document.getElementById("mess").innerHTML = "Thousands of more years later...";
setTimeout(function() {
document.getElementById("mess").innerHTML = "I hear something...";
document.getElementById("rocket").style.display = "block";
var rocket = anime({
targets: '#rocket',
translateX: xR,
translateY: yR,
rotate: 90,
width: 300,
height: 300,
duration: 2000,
easing: 'easeInOutSine',
complete: function() {
// next code here
}
})
}, 2000);
}, 2000);
}, 2000);
}, 2000);
In this code we hide all the mountains, and then we use javascript timeouts until the aliens come. For the aliens, we show the rocket and then we draw the rocket rotating 90 degrees and failling down to the ground. That's all really, and our animation is almost done. Now add this to the newest complete function:
document.getElementById("mess").innerHTML = "The aliens seems to be colonizing...";
document.getElementById("rocket").style.display = "none";
document.getElementById("alien").style.display = "block";
var alien = anime({
targets: '#alien',
translateX: -xR + 100,
duration: 2000,
rotate: 10,
easing: 'easeInOutSine',
direction: 'alternate',
complete: function() {
document.getElementById("mess").innerHTML = "The aliens have taken over Earth, and continue to live happily ever after.";
}
})
// Next Code
This code basically does the same thing as out other codes, we change the message and animate the aliens exploring Earth. We are so close to finishing, now all we need to do is create buildings as the aliens are walking. Right after the last animation put this code:
setTimeout(function() {
document.getElementById("abarn").style.display = "block";
setTimeout(function() {
document.getElementById("ahouse").style.display = "block";
setTimeout(function() {
document.getElementById("acar").style.display = "block";
}, 500);
}, 500);
}, 500);
And finally we are done! If you got lost along the way, the code is here. That's it for today, be sure to leave a like and follow me for more tutorials like this! Byeeee!
TV-Theorist ~ October 12
seems cool but i don't know programming very well... can you recommend resources to learn?