Framer Motion is a React animation library offering intuitive motion components, physics-based animations, and gesture support. Its component-based approach and declarative syntax provide advantages over CSS animations, enabling dynamic, engaging user interfaces for developers of all skill levels.
In this blog we will be demonstrating about an animation library for React called Framer Motion. If you are completely new to animations in CSS, refer to the blog how to animate in CSS.
What is FramerMotion?
Framer Motion is a powerful animation and gesture library for React that helps developers create beautiful and engaging user interfaces. Whether you're a seasoned developer or just getting started with animation, Framer Motion provides a simple and intuitive way to add animations and interactions to your web projects. It uses a prop-based approach to create animations using motion components. Think of the motion component as a plain HTML or SVG element, supercharged with animation capabilities.
How to install it?
Run the below command to install it in your project:
How to use it?
Once you install it, you can now use it in your react app by importing it like below:
Now that we have understood how to set up Framer motion in our project, let us create a simple sliding box animation using it, and right away you will see how easy it is to do that using this library.
In your App component write the below code.
That’s it! We have our animation ready! All we did was
The only CSS I used here was the basic layout and giving width and height to the box.
Now let's see what exactly we did here.
As I mentioned earlier, Framer Motion uses motion components. Think of it as “HTML tags with animation superpower” if you will. Each HTML tag will have a corresponding motion tag. Example, <motion.div />, <motion.svg />, etc.
These motion components now allow us to pass some extra props to them like animate, transition, and some more.
In the above example, we used <motion.div> and passed x: 500 as a value to animate prop. This is why our box shifted rightwards by 500px.
Framer uses “spring” as the default animation. It provides a cool effect of bouncing back to the final state which seems more natural and physics-friendly. But you can of course change these default animations and some more properties using transition prop.
Here, we have changed the animation to ‘easeOut’, increased the duration of the animation to 2 seconds, and made it run infinite times.
Framer Motion provides a more powerful and flexible way to animate components compared to traditional CSS animations. Some of the key benefits of using Framer Motion include:
You can also create keyframes for creating different animations at different points in time. This can be done by simply providing an array of values instead of a single value for any property.
In the above example, we provided an array of values for x and borderRadius properties. So, the animation will go through each value in the sequence.
By default, each keyframe will be spaced evenly throughout the animation. You can override this by setting the times option via transition.
times is an array of the same length as the keyframes array, with numbers between 0 and 1 defining where in the animation each keyframe should be hit.
Here, we have given times: [0, 0.8, 1] which means 0%, 80%, and 100% of our total animation duration i.e. 0s, 2.4s, and 3s.
In Framer Motion, gestures are a way to add touch and mouse interactions to elements on a webpage. They allow users to interact with elements in a more natural and intuitive way. Framer motion currently has support for hover, tap, pan, and drag gesture detection.
For example, you can create a draggable element by adding the drag prop to the element and defining the x and y constraints of the draggable area.
In the above example, we added the drag prop to our motion component, which allowed it to be dragged on the screen. Further, we also added some constraints to the extent where our component should be draggable. Here, we can drag the box only up to 100px on the right side. If we drag it any more, it will come back to the 100px position. Also, note how the box very naturally slides to its final position. This is because of the default spring animation type. So cool, right?
Let us see one more example of the hover gesture.
Here, we are scaling our box if we hover over it. It will also go back smoothly to its initial state once we stop hovering on it.
Overall, Framer Motion is an excellent tool for creating dynamic and engaging animations and interactions on the web. It's easy to use and highly customizable, making it a great choice for developers of all skill levels. I hope that you've found this blog helpful and informative and that you're now inspired to incorporate Framer Motion into your own projects. We encourage you to continue learning and experimenting with this library to create even more amazing animations and interactions.
Learn how to implement structural design patterns for reusability and maintainability in modern development. In this blog, we code examples of Facade and Decorator patterns to optimize your software design.
Learn about securing desktop applications through penetration and security testing. Explore our five-step process for identifying and mitigating potential threats, and adopt recommended best practices to enhance your application's security.
This blog outlines the process of creating a custom database migration system using Node.js, & any database ORM. Furthermore, it explains creating migration files, writing migration code, and applying Electron-specific changes in order for the migration system to operate effectively in a production environment.