React Transitions

🎭 React Transitions (Beginner-Friendly Guide)

React transitions make your UI feel smoother by adding animations when elements appear, update, or disappear. Since React doesn’t include built-in animation tools, we typically use libraries.

The MOST popular and easy-to-use animation library for React is:

👉 React Transition Group

📦 Install React Transition Group

Run:

🚀 Basic Example Using `CSSTransition`

Here’s how to fade text in and out:

📁 `App.js`

import { CSSTransition } from "react-transition-group";
import { useState } from "react";
import "./styles.css";

function App() {
const [show, setShow] = useState(false);

return (
<div className="App">
<button onClick={() => setShow(!show)}>
Toggle Text
</button>

<CSSTransition
in={show}
timeout={300}
classNames="fade"
unmountOnExit
>
<h2>Hello React Transition!</h2>
</CSSTransition>
</div>
);
}

export default App;

import { CSSTransition } from "react-transition-group";

import { useState } from "react";

import "./styles.css";

function App() {

const [show, setShow] = useState(false);

return (

<button onClick={() => setShow(!show)}>

Toggle Text

</button>

<CSSTransition

in={show}

timeout={300}

classNames="fade"

unmountOnExit

<h2>Hello React Transition!</h2>

</CSSTransition>

</div>

);

}

export default App;

📁 `styles.css`

🔥 Result: The text smoothly fades in/out.

🎬 Multiple Item Transitions Using `TransitionGroup`

Useful for lists (to-do list, notifications, etc.)

Example:

import { useState } from "react";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import "./styles.css";

function TodoList() {
const [items, setItems] = useState(["React", "CSS", "Animation"]);

return (
<>
<button onClick={() => setItems([...items, "New Item"])}>
Add Item
</button>

<TransitionGroup component="ul">
{items.map((item) => (
<CSSTransition key={item} timeout={300} classNames="fade">
<li>{item}</li>
</CSSTransition>
))}
</TransitionGroup>
</>
);
}

import { useState } from "react";

import { CSSTransition, TransitionGroup } from "react-transition-group";

import "./styles.css";

function TodoList() {

const [items, setItems] = useState(["React", "CSS", "Animation"]);

return (

<button onClick={() => setItems([...items, "New Item"])}>

Add Item

</button>

{items.map((item) => (

</CSSTransition>

))}

</TransitionGroup>

</>

);

}

export default TodoList;

Same CSS fade animation works.

🧠 Understanding Transition States

React Transition Group offers 4 animation states:

State	Meaning
`entering`	Element is being added
`entered`	Element is fully visible
`exiting`	Element is leaving
`exited`	Element removed

You can react to these states using useEffect or CSS.

🎨 Styling with `classNames`

The CSS classes follow this naming pattern:

You can rename classNames to anything.

⚡ Alternative: Framer Motion (More Advanced)

If you want smoother, modern animations:

Example:

import { motion } from "framer-motion";

export default function App() {
return (
<motion.h2 initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1 }}>
Smooth Animation with Framer Motion 🎉
</motion.h2>
);
}

import { motion } from "framer-motion";

export default function App() {

return (

<motion.h2 initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1 }}>

Smooth Animation with Framer Motion 🎉

</motion.h2>

);

}

🏁 Summary Table

Method	Library Needed	Best For
CSS Transition + Class Names	✔ Yes (React Transition Group)	Basic fade/slide animations
TransitionGroup	✔ Yes	Animating lists
Framer Motion	✔ Yes	Modern, fluid, advanced UI animations
Inline animation logic	❌ No	Very basic one-time animations

🎉 Congratulations!

You now understand:

How to animate components in React
How to use CSSTransition and TransitionGroup
Alternative modern method using Framer Motion

React Transitions

🎭 React Transitions (Beginner-Friendly Guide)

📦 Install React Transition Group

🚀 Basic Example Using `CSSTransition`

📁 `App.js`

📁 `styles.css`

🎬 Multiple Item Transitions Using `TransitionGroup`

Example:

🧠 Understanding Transition States

🎨 Styling with `classNames`

⚡ Alternative: Framer Motion (More Advanced)

🏁 Summary Table

🎉 Congratulations!

You may also like...

React Tutorial

React Hook

React Transitions

🎭 React Transitions (Beginner-Friendly Guide)

📦 Install React Transition Group

🚀 Basic Example Using CSSTransition

📁 App.js

📁 styles.css

🎬 Multiple Item Transitions Using TransitionGroup

Example:

🧠 Understanding Transition States

🎨 Styling with classNames

⚡ Alternative: Framer Motion (More Advanced)

🏁 Summary Table

🎉 Congratulations!

You may also like...

React Render HTML

Upgrade React

React Portals

React Tutorial

React Hook

🚀 Basic Example Using `CSSTransition`

📁 `App.js`

📁 `styles.css`

🎬 Multiple Item Transitions Using `TransitionGroup`

🎨 Styling with `classNames`