Framer Motion is an animation library for React js. It is very easy to learn.Compared to vanilla CSS animations Framer Motion is more beginner friendly. Using framer motion in our project will speed up our work. Once we learn the basics, always try to read the official docs for better understanding.
All the topics are saved as seperate branches
After Installation,import a motion component to our project as
follows:-
import {motion} from 'framer-motion'
In such cases try following code
Let's start animating our first component.
First step is very simple, just add "motion." before every tags.
Example:
If you are animating h1,
instead of <h1> Hello World </h1> write
<motion.h1> Hello World </motion.h1>
Now we have to assign an animate attribute, and define what kind of
animation we want.
eg:
animate = {{x: " 100px "}}
this will animate our element 100px away from actual position.
Let's check the result
Feel free to play around with other animation properties like
opacity, rotateX, background-color, font-size. etc
Now we can add an initial attribute so that we can customize our
animation.
Initial attribute as the name indicates, is used to define the
beginning of our animation.
Look at the sample code below:
See the difference
What did just happen here?
Here X:0 means original position of the object.
When the page renders our object is 300 px away from original position and
at the end of the animation object reach at it's original position,that is X:0
Assingment:
Now try animating opacity property yourself.
Hint: initial= opacity:0
animate=opacity:1
Transition attribute gives us more control and customisation on our
animation.
We have already learned to move object from one position to other. We can define a transition "type"
for this animation.
Here is an example for animation type 'spring' which is also the default type. Explore more types yourself.
See the sample code below:
Let's see the changes in the animation
Let's learn some properties that can be used inside transition attribute
Delay Property:
If we set
delay:1
then the animation will begin only after one second.
Duration Property:
duration:2
Duration for the animation will be 2 seconds.
Just add a property whileHover and there you go!
Let's learn with an example
Watch the magic
We have learnt enough basics. congratulations !!
Let's learn some advanced stuffs now.
Imagine we are working on a big project, defining animation properties in every line will be
extremely difficult.
That's exactly were Variants come for our help.
In this method, we must define our animation as an object.
myVariants, start and final are my choice of names.
You can use any name you wish.
Our animation will not have any difference if we use variants,
but our code will look much cleaner.
Here variants are assigned as an object, hence wrapped inside curly brackets, mean while Initial and Animate attributes are assigned as strings.
We can define different variants for different objects.
Have a look at the code below
See the result
Here both animations take place simultaniously, which is not looking great.
So we can use orchestration properties which will give a better look for our animations.
when property:
If we simply add the following line inside transition object,
child animation begin only after completing parent animation.
when:'beforeChildren'
See the code below:
See the result
Stagger Children:
When we have more child component animations inside our parent div, we can set this
staggerChildren.
This will make animation one by one. Are you confused of my explanation?
Don't worry,
just watch the end result and you will get to know what's exactly
happening.
See the code below:
See the result
Be creative and practice with variety of combinations for parent and child animations.
Did you notice two new properties inside transition?
damping & mass , what are they?
That's the Assingment for this section. Change it's values and find yourself what happpens.
When it comes to animation, key frames are inevitable.
Let's start with basics.
We are going to define our keyframes array inside the transtion object. Confused?
Don't worry,
it's not that complicated.
Have a quick look at the example code
const myVariants = {
hover: {
scale:[1,1.1,1,1.1,1.1]
}
}
We have added scale property again and again total four times,
so we should get an animation that repeats four times.
Let's see what happened to the animation
If we want to repeat this animation 10 times, what should we do?
Repeating scale property ten times is not a good idea, right?
So we are going to learn a new property
yoyo
Now we can substitute Key frames array with yoyo property.
Yoyo is defined inside transition object. If we need to repeat our animation ten times,
write the code as follows.
const myVariants={
start:{
opacity:0
},
final:{
opacity:1,
transition:{
yoyo:10
}
}
}
Infintity property:
As the name indicates this is for assigning animations that repeats infinite times.
See The Sample Code Below
We can create our own custom loader with what we have learned so far. Try your creativity and come up with crazy ideas !
Here is a simple one for your reference.
CSS for the div:
.loader{
height: 10px;
width:10px;
border-radius: 50%;}
Let's see our custom loader in action
Use Cycle is a hook that help us to toggle between different animtions. It is similar to useState.
First we need to import useCycle from framer motion as follows
import {useCycle} from "framer-motion"
Define our useCycle
const [animation,cycleAnimation] =
useCycle("animationOne" , "animationTwo")
Here i have defined two animations inside useCycle array that is
animationOne and animationTwo. We can define more animations if we want.
Now check the following screenshot , i hope no need to explain more about it, funtionality is same like useState.
See How The Animation Is Changing On Click
congratulations
We have learned enough stuffs to start using framer motion in our projects.
Always remember that this is not a complete tutorial, there are more things to learn.
Some Key Words For Your Further Learning:
