Anime.js Tutorial – JavaScript Animation Engine in 10 Minutes


in previous video we talked about anime.js as one of the most popular JavaScript library in 2020 so in this
video we are going to give you a quick tutorial on how anime is works and how
to use it to create this animation ready let’s check it out so here is the anime.js documentation a very good start to learn about the features first we’ll
learn how to create a very first animation which is to move the square
from left to right and here is the example page that I
already added a square element let’s include the library into the page using
script tag the easiest way to create
animation is to create an anime object then pass our element targets then followed by the new CSS properties
that we want to animate in this case we will use translateX to move the square
animation will play automatically for once and then stop from here we can customize our animation
may adding more properties for example I’m going to add spin and scale effect then set animation
to 3 seconds and make it loop you can find a full list of these properties
on the documentation page the cool thing about anime is is you can
also use it to animate JavaScript object and Dom attributes as well which is very
useful if you are using react for example if I have an input field I can
use an images to animate its value first select our input field using CSS
selector then pass the value range that we want to animate followed by animation
properties and also round a value since we don’t
want to see a floating numbers now you see the value is swinging around
instead of stopping at 100 this because of the default animation easing effect
so let’s change it to linear I will also set a direction to alternate
this will make an animation automatically play backward to the
beginning the next important topic of
anime.js is keyframes similar to CSS keyframes you can create animation keyframes with
keyframes property so back to our first example instead of moving square from
left to right we will move it in a circle animation keyframes are defined
using an array an each keyframe will be an object you can animate more than one properties
for each keyframe for example I’m going to add a scaling effect along with the
movement keyframes can also be defined at
property level but personally I think it’s more difficult to write and
maintain the code especially if you have complex animation
the next key and perhaps the most powerful features of an image as is
stagger I think it’s easier to understand if I just show you the
example so I have five square elements with animation moving from left to right
using translateX currently it looks like this now I’m going to add stagger to the
animation as you can see stacker will make
and move from the previous element position this allows you to animate
multiple elements with follow through and overlapping action
you can also customize a stagger direction using from for example I’m
going to make the rightmost Square to start moving first and the rest to
follow using stagger delay from last element and that’s not the best part of stagger
yet you can easily create a mind-blowing animation using grid and access let me
show you by recreating this example together here are the total of 70 squares in five
rows 14 each first I’m going to add a selector and then add stagger rotation from
Center with value range of 0 to 90 degrees now I’m going to add a grid property to
tell the library that there are 5 rows of 14 elements you can see that the rotation are all in
the same direction see if I add an axis property as you can see the rotation will
actually start rotating from center along the x-axis we can use axis property to force the
direction of the staggering effect let’s add translateX and Y using the same
concept now let’s add stagger delay, animation
loop and alternate direction and finally said the easing functions
you easeInOutQuad the last topic for this tutorial we are
going to talk about is timeline it allows you to combine multiple complex
animations together let me show you how first create a new timeline object then customize the time line duration,
loop and direction say way we did previously then you can add the animation to the
timeline using add method don’t forget to remove the loop and direction properties for each animation now to add another animation just chain
calling add method and that’s all for the basic of anime.js I will probably create more advanced tutorial for this library like
how to use motion paths or SVG morphing later if you like this video like a
subscribe our channel to stay tuned thanks for watching see you next time
bye

28 thoughts on “Anime.js Tutorial – JavaScript Animation Engine in 10 Minutes

  1. How cool. Can't wait to see the follow-up tutorial series on Anime.js. 🙂 Truth is that there is no consistent set of tutorials, at least that I know of, in this matter. I think you should totally do it! Cheers. 👊

Leave a Reply

Your email address will not be published. Required fields are marked *