Adarsh MWe all know that React is a go-to JavaScript library for crafting dynamic user interfaces. But when it comes to adding those sleek and attention-grabbing animations to your interfaces, developers often need special tools to make the user experience pop.
That’s where Framer Motion comes into play—it’s like a magic animation wand tailored just for React apps. Framer Motion takes a friendly and clear-cut approach to making animations. This means developers can effortlessly breathe life into their UI pieces with smooth movements and interactive shifts.
Unlike some tricky animation setups, Framer Motion keeps things easy. With just a sprinkle of code, you can bring in captivating animations, cool gestures, and designs that adapt seamlessly. This library dishes out a buffet of animation options, from basic moves to fancy physics-based effects, making it versatile for all sorts of design wishes.
So, if you’re all about creating snazzy micro-animations or cooking up elaborate animated UI parts, Framer Motion is your go-to assistant. It makes adding motion to your React projects a breeze, amping up how friendly and stylish your creations are.
In this detailed guide, we will look at everything that you need to know about framer motion to get started with it. So, Let’s get started.
What is Framer motion?
Framer motion is one of the most popular animation libraries for React JS. It is one of the well-maintained projects and has around 20K stars on Github. Framer Motion is an open-source animation library designed specifically for React applications. It provides an intuitive and declarative way to create animations by leveraging the power of React’s component-based architecture.
Framer motion makes it easy for developers to effortlessly include animations, enhancing both aesthetics and user experience. Whether you’re new to animations or an experienced pro, Framer Motion simplifies the process, making your UI elements come alive with fluid motion and interactive transitions.
Let’s look at a simple example.
import “./App.css”;
import { motion } from “framer-motion”;
export default function App() {
return (
<motion.div
className=“box”
animate={{
scale: [1, 2, 2, 1, 1],
rotate: [0, 0, 180, 180, 0],
borderRadius: [“0%”, “0%”, “50%”, “50%”, “0%”]
}}
transition={{
duration: 2,
ease: “easeInOut”,
times: [0, 0.2, 0.5, 0.8, 1],
repeat: Infinity,
repeatDelay: 1
}}
/>
);
}
This creates an awesome rotating animation.
 |
 |
Installing framer motion
To install Framer Motion, you need to use npm, the Node.js package manager. Open your terminal and enter the following command:
npm install framer-motion
Importing
Once Framer Motion is successfully installed, you can start using it in your React components. Import the motion module from the framer-motion package at the beginning of your file:
import { motion } from “framer-motion“;
By importing motion, you gain access to the core features of Framer Motion that enable you to create dynamic and engaging animations.
Animations using Framer motion
Creating animations with Framer Motion is straightforward. Let’s consider a basic example where we animate a box element to fade in and slide in from the left when the component mounts:
import React from “react”;
import { motion } from “framer-motion”;
const BasicAnimation = () => {
return (
<motion.div
initial={{
opacity: 0.9,
y: –100,
scale: 1,
backgroundColor: “red”,
color: “white”,
}}
animate={{
opacity: 1,
x: 512,
scale: 4,
backgroundColor: “green”,
color: “white”,
}}
transition={{ duration: 8, repeat: Infinity }}
className=“box”
>
Welcome to Framer Motion!
</motion.div>
);
};
export default BasicAnimation;
You can observe the animation changing the background color, size, opacity, etc.
Before:
After:
Transitions
Motion will automatically generate suitable animations for smooth transitions based on the types of values being animated. For example, physical properties such as x or scale will be animated using a spring simulation, while values like opacity or color will be animated using a tween.
In the below example, the element undergoes a sequence of transformations, including scaling, rotation, and border-radius changes, with a 2-second duration and a smooth easing effect. The animation loops infinitely, with a 1-second delay between each repetition.
import “./App.css”;
import { motion } from “framer-motion”;
export default function App() {
return (
<motion.div
className=“box”
animate={{
scale: [1, 2, 3, 1, 1],
rotate: [0, 0, 180, 180, 0],
borderRadius: [“0%”, “0%”, “40%”, “50%”, “0%”]
}}
transition={{
duration: 2,
ease: “easeInOut”,
times: [0, 0.2, 0.5, 0.8, 1],
repeat: Infinity,
repeatDelay: 1
}}
/>
);
}
Output
 |
 |
Interactive Animations
Framer Motion also allows you to create interactive animations. You can use properties like whileHover and whileTap to define animations that trigger when a user interacts with an element:
Let’s look at an example:
import React from “react”;
import { motion } from “framer-motion”;
import “./App.css”;
const InteractiveAnimation = () => {
return (
<motion.div
whileHover={{
scale: 2.2,
rotate: 80,
backgroundColor: “pink”,
borderRadius: [20, 20, 40, 80, 100],
}}
whileTap={{
scale: 0.9,
rotate: 80,
backgroundColor: “yellow”,
borderRadius: [20, 20, 40],
}}
className=“box”
transition={{ duration: 1 }}
></motion.div>
);
};
export default InteractiveAnimation;
Initially, the output will be like this:
When we hover the element, the output will be as shown below:
And when we tap on the object, the output will be like this.
Animating Scroll Effects
Scroll-based animations can add a touch of sophistication to your web applications by dynamically revealing content as users scroll through a page. Framer Motion provides powerful tools to create scroll-triggered animations, making your interfaces more engaging and interactive.
Parallax Effects with useTransform and useViewportScroll
Parallax scrolling is a popular technique that creates an illusion of depth by moving different layers of content at varying speeds as the user scrolls. Framer Motion makes implementing parallax effects remarkably straightforward.
One of the essential tools for scroll-based animations is the useScroll hook. This hook provides data about the user’s scroll position, which can be used to create animations based on scrolling progress.
The useTransform function takes in a numeric input (such as scroll position) and maps it to an output range. This is incredibly useful for translating scroll position into animation properties, like opacity, scale, or translation.
Here’s a simple example of creating a slider for showing the amount of scrolling done using Framer Motion:
import “./App.css”;
import Lorem from “./Lorem.jsx”;
import { motion, useScroll } from “framer-motion”;
export default function App() {
const { scrollYProgress } = useScroll();
return (
<>
<motion.div
className=“progress-bar”
style={{ scaleX: scrollYProgress }}
/>
<h1>
<code>useScroll</code> demo
</h1>
<Lorem />
</>
);
}
Custom Animation Transitions
Creating captivating animations often requires more than just basic transitions. Framer Motion helps to customize easing functions, transition durations, delays, and even create dynamic animations that respond to user interactions. In this section, we’ll delve into the world of custom animation transitions, enabling you to craft animations that truly stand out.
Custom Easing Functions and Transition Durations
Easing functions define how an animation accelerates or decelerates over time, shaping its visual feel. Framer Motion provides a variety of pre-defined easing functions, such as “easeInOut” and “linear”, but you can also create your own custom easing functions using cubic-bezier curves.
<motion.div
animate={{ opacity: 0 }}
transition={{ ease: [0.17, 0.67, 0.83, 0.67] }}
/>
3D with React-Three-fibre and Framer
With the help of both R3F and Framer Motion, we can create super engaging animations on your website. Framer Motion 3D is a simple yet powerful animation library for React Three Fiber. It offers most of the same functionality as Framer Motion for declarative 3D scenes.
Installation
npm install three @react–three/fiber framer–motion–3d
Usage
Similar to Framer Motion’s motion components for HTML, Framer Motion 3D introduces motion counterparts for R3F components. Begin by importing the motion component from “framer-motion-3d”:
import { motion } from “framer-motion-3d”;
Benefits of Using Framer Motion
Framer Motion offers several key benefits that make it a popular choice among developers:
Ease of Use: Framer Motion’s API is designed to be developer-friendly, making it accessible to both beginners and experienced developers.
Declarative Syntax: Framer Motion adopts a declarative syntax that simplifies the animation creation process. By describing animations in a straightforward manner, you can focus on the desired outcome rather than the intricate implementation details. This approach leads to cleaner and more understandable code, making collaboration and maintenance a breeze.
Rich Animation Options: Framer Motion provides a wide range of animation options, from simple transitions to complex physics-based animations.
Responsive Animations:
Responsive design is crucial in today’s multi-device landscape. Framer Motion facilitates the creation of responsive animations that adapt to different screen sizes and orientations. With the library’s built-in features, you can ensure your animations look and feel great on various devices.
Interactive Gestures: In addition to animations, Framer Motion also offers gesture recognition and interactivity features, allowing you to create engaging user experiences.
Performance: Animation performance is a critical aspect of user experience. Framer Motion optimizes animations to ensure smooth and efficient rendering. With features like layout animations and the ability to customize animations based on user interactions, you can further fine-tune performance for your specific needs.
Community and Documentation:
Framer Motion boasts an active community and extensive documentation. If you encounter challenges or need inspiration, you can rely on community support to find solutions. The well-maintained documentation offers tutorials, examples, and explanations to help you harness the full potential of the library.
Integration with Other Libraries:
Framer Motion seamlessly integrates with other popular libraries, enhancing its versatility and compatibility. Whether you’re using React, React Native, or other UI frameworks, Framer Motion can easily be incorporated into your existing projects.
Wrapping it Up
Thanks for checking out this blog. From understanding the fundamentals of Framer Motion to harnessing its motion components, animation methods, and interactive gestures, you’ve gained a solid foundation for creating animation-rich UIs using framer motion. This blog is a good start if you are new to animations and Framer Motion.
Ajay Yadav
Add comment