---
title: "Create Stunning React Animations Easily with Framer Motion"
published_at: "2025-01-23T12:03:43+00:00"
modified_at: "2025-11-25T11:13:38+00:00"
url: "https://www.syncfusion.com/blogs/post/react-animations-framer-motion-guide"
excerpt: "Learn how to create stunning and interactive animations in your React apps with framer motion. Boost user engagement with smooth transitions and effects."
taxonomy_category:
- "Front-End Development"
- "JavaScript"
- "React"
- "Web Development"
taxonomy_post_tag:
- "Framer Motion"
- "JavaScript Libraries"
- "React Animation"
- "UI/UX"
- "Web Design"
---
# Create Stunning React Animations Easily with Framer Motion
[Prashant Yadav](https://www.syncfusion.com/blogs/author/prashant-yadav)
**TL;DR:** This blog post provides a comprehensive guide using Framer Motion, a React animation library. It covers key concepts like motion components, variants, and transitions and provides practical examples of creating fading button, slide-in sidebar, draggable modal, and card flip animations.
Our first priority as front-end developers is to create web applications that keep users engaged. This is possible by creating interactive pages and providing a better user experience.
Animations make your pages interactive; they guide users and make interactions interesting. Small visual motions on the page, such as user interaction or events or page navigation, give a feel of liveliness, like we are interacting with a living thing responding to our actions.
Animation, in simple terms, is a way of visually changing the elements by updating their properties or dimensions over time on interactions or certain events. For example, a loading indicator that shows that your action is in progress.
There are two ways to animate an element on the webpage (two ways to change the element properties).
1. Through CSS, libraries like [Animate.css](https://animate.style/) provide a set of animation classes that can be added to HTML elements.
2. Through JavaScript, libraries like [Framer Motion](https://motion.dev/docs/react-motion-component) manipulate the DOM element’s properties at runtime through code.
In this article, we will explore Framer Motion, one of the most popular libraries for animation. It provides simplicity and flexibility and is designed to work with modern frontend frameworks like React.
## Why Framer Motion?
Framer Motion is a production-ready animation library for React that creates simple animations like transitions and complex, gesture-based interactions through its declarative syntax. It features:
- **Ease of use**: Framer Motion is extremely simple and easy to use, thanks to its intuitive APIs and methods.
- **Flexibility**: It can be used to create complex animations like pan, drag, pinch, or simple animations like fading, transitioning.
- **Performance**: Motion components are optimized for performance, as they are rendered outside the React lifecycle to run smoothly and ensure a seamless user experience.
- **Community and Support**: Extensive documents, large sets of examples, and great adoption by the community make it easier to get started.
## Getting started with Framer Motion
Add the Framer Motion library to your project using the **npm** or ** yarn** package manager.
```
npm install framer-motion
```
Or
```
yarn add framer-motion
```
Once the dependency is loaded you can include this in your project to create interactive animations.
```
// On Client side
import { motion } from "motion/react"
// On Server-side
import * as motion from "motion/react-client"
```
### Basic concepts
**Motion components**:
Framer Motion comes with a list of motion components to create 120fps animations. It provides gesture support that contains all the HTML elements (like motion.div) and common SVG elements (like motion.square) that are special React components that can be used.
```
```
**Props & APIs**:
Framer Motion provides a list of APIs as props, such as **initial**, ** animate**, and ** exit**that define the animation behavior.
```
Click Me
```
**Initial** prop is fired on the component mount, **animate** is fired when the component updates, and the ** exit** prop is fired when the component unmounts. Refer to the complete Framer Motion [animation guide](https://motion.dev/docs/react-animation)
for more details.
Motion components are independent of the Reacts lifecycle or render cycle for improved performance. Thus, we should rely on the React state for the animation, rather than using the [motion values](https://motion.dev/docs/react-motion-value)
that will update the styles without triggering re-renders.
```
import { motion, useMotionValue } from "framer-motion";
const MotionState = () => {
const xPosition = useMotionValue(0);
useEffect(() => {
// It won’t trigger a re-render on the component
const interval = setInterval(() => {
xPosition.set(xPosition.get() + 100);
}, 1000);
return () => clearInterval(interval);
}, []);
return (
);
};
```
In the previous example, the **motion.div** element will be translated by 100px on the x position (horizontally, translateX(100px)) at an interval of 1s.
**Variants**: framer-motion provides support for the variants, which allows the reuse of animation configurations across multiple elements.
```
const AnimatedList = () => {
const listVariants = {
hidden: { opacity: 0, y: 20 },
visible: {
opacity: 1,
y: 0,
transition: {
staggerChildren: 0.2,
},
},
};
const itemVariants = {
visible: { opacity: 1 },
hidden: { opacity: 0 },
};
return (
{[1, 2, 3].map((item) => (
Item {item}
))}
);
};
```
**Variants includes:**
- **listVariants**: Defines the animation behavior for the entire list, we pass the variants values on the props that will access the properties on its firing. ** initial=”hidden”** and ** animate=”visible”**. ** staggerChildren** ensures that the child elements animate in sequence.
- **itemVariants:** Defines the animation behavior for the list items.
- The **motion.ul** and ** motion.li** components inherit the variants to create a coordinated animation.
**Custom components**: Any React component can be converted to a motion component by passing it through the ** motion.create()** function.
```
const ReactComponent = (props) => {
return