Animations make React applications feel more interactive, engaging, and professional.
Common examples include:
Several animation libraries exist in the React ecosystem:
Note: Throughout this course, we will primarily focus on Framer Motion, as it is the most popular and beginner-friendly animation library for React applications.
Animations improve both the appearance and usability of an application.
Benefits include:
Without animations:
With animations:
The React ecosystem offers several animation solutions.
Each library is designed for different use cases.
| Library | Best For |
|---|---|
| Framer Motion | General React animations |
| React Spring | Physics-based animations |
| GSAP | Professional animation timelines |
React Spring is a spring-physics-based animation library.
Instead of using fixed durations, animations behave like real-world physics.
React Spring is ideal when animations should feel natural and realistic.
GSAP (GreenSock Animation Platform) is a professional-grade animation library.
It is widely used for highly customized and complex animations.
GSAP provides powerful animation capabilities but has a steeper learning curve than Framer Motion.
Throughout this course we will primarily use Framer Motion.
Framer Motion is a React animation library that makes it easy to create smooth, declarative animations using React components.
Instead of writing complex animation logic, developers simply describe the desired animation.
Framer Motion provides:
It integrates naturally with React and is one of the most widely used animation libraries today.
npm install motion
import { motion }
from "motion/react";
The motion component behaves like a normal React element but supports animation properties.
<motion.div
animate={{
x: 100
}}
>
Hello
</motion.div>
This moves the element 100 pixels to the right.
Animations usually begin from an initial state.
<motion.div
initial={{
opacity: 0
}}
animate={{
opacity: 1
}}
>
Content
</motion.div>
Flow:
Initial State
│
▼
Animate State
│
▼
Smooth Transition
The component fades into view when rendered.
The transition property controls how the animation behaves.
<motion.div
animate={{
x: 100
}}
transition={{
duration: 1
}}
/>
This animation lasts 1 second.
Other transition options include easing, delay, and spring animations.
Animations can respond to user interactions.
<motion.button
whileHover={{
scale: 1.1
}}
>
Hover Me
</motion.button>
When the mouse hovers over the button, it becomes slightly larger.
Animations can also respond when a user clicks or taps.
<motion.button
whileTap={{
scale: 0.9
}}
>
Click
</motion.button>
The button briefly shrinks while being clicked.
| Property | Purpose |
|---|---|
| x | Horizontal Movement |
| y | Vertical Movement |
| scale | Resize Element |
| rotate | Rotate Element |
| opacity | Change Transparency |
These properties are the foundation of most Framer Motion animations.
<motion.div
initial={{
opacity: 0
}}
animate={{
opacity: 1
}}
transition={{
duration: 0.5
}}
>
Welcome
</motion.div>
This creates a simple fade-in animation over half a second.
<motion.div
initial={{
x: -100
}}
animate={{
x: 0
}}
>
Content
</motion.div>
The component starts 100 pixels to the left and slides into its final position.
Animations can be shown only when a condition is true.
{
isVisible && (
<motion.div>
Content
</motion.div>
)
}
This is commonly used for:
Normally, React immediately removes components from the DOM.
AnimatePresence allows exit animations before the component disappears.
import {
AnimatePresence
}
from "motion/react";
<AnimatePresence>
{
show && (
<motion.div
exit={{
opacity: 0
}}
>
Modal
</motion.div>
)
}
</AnimatePresence>
Flow:
Component Visible
│
▼
User Closes
│
▼
Exit Animation
│
▼
Removed From DOM
This creates smooth disappearing animations.
Framer Motion can automatically animate layout changes.
<motion.div
layout
>
Content
</motion.div>
When the component changes position or size, Framer Motion animates the movement automatically.
Useful for:
Many modern React applications animate page navigation.
Typical flow:
Page A
│
▼
Fade Out
│
▼
Fade In
│
▼
Page B
This makes navigation feel much smoother than instantly replacing content.
Developers choose Framer Motion because it offers:
Most common animations can be implemented with only a few lines of code.
| Library | Best For |
|---|---|
| Framer Motion | General React Animations |
| React Spring | Physics-Based Animations |
| GSAP | Advanced Professional Animations |
Best for:
Best for:
Best for:
Many React applications today use:
React
+
Tailwind CSS
+
Framer Motion
This combination provides beautiful interfaces while keeping animations easy to implement.
A typical dashboard animation might look like:
Page Load
│
▼
Fade In Cards
│
▼
Hover Effects
│
▼
Modal Animations
Framer Motion makes each of these animations straightforward to build.
You should be aware that libraries such as:
exist and are widely used.
However, throughout this course we will primarily focus on:
Framer Motion
because it provides the best balance of:
Animations should improve the user experience, not distract from it.
Good examples include:
These interactions provide useful visual feedback.
Too many animations can make an application feel slow or overwhelming.
Use animation only where it improves usability.
Framer Motion works naturally with Tailwind CSS.
Tailwind CSS
+
Framer Motion
Tailwind handles styling while Framer Motion handles movement.
Whenever components appear and disappear, prefer AnimatePresence for smooth transitions.
| Library | Purpose |
|---|---|
| Framer Motion | React Animation Library |
| React Spring | Physics-Based Animations |
| GSAP | Professional Animation Platform |
| AnimatePresence | Exit Animations |
| motion Component | Animated React Component |
| transition | Animation Timing |
Several animation libraries exist for React applications:
For modern React development, the most practical and beginner-friendly choice is:
React
│
▼
Tailwind CSS
│
▼
Framer Motion
Framer Motion makes it easy to build smooth, interactive, and production-ready animations while integrating naturally with React.
Typical animation workflow:
React Component
│
▼
motion Component
│
▼
Animation Properties
│
▼
Smooth User Experience
By combining React, Tailwind CSS, and Framer Motion, developers can build responsive and visually engaging applications with minimal complexity.