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