React Animation: Adding Motion to Your React Apps

Introduction

In modern web development, animation plays a crucial role in enhancing user experience and making interfaces feel more dynamic and engaging. In React, animations help bring components to life from smooth page transitions to interactive button effects.

React animations are the best way to build up apps just like feel engaging and alive. Static interface represents that the dull or incomplete elements work as a slide, fade, or also bounce smoothly. Animation provides to user attention, displays the transition, and makes the changing of state more interactive.

In this blog, we will discuss React Animation | Adding motion to your React Apps with real-life examples and how to manage the User interface with the use of React animation.

What is React Animation?

React Animation refers to the process of adding motion effects and transitions to elements or components within a React application to make the user interface (UI) more interactive and visually appealing.

Also, it uses a component-based architecture and state management, making it more interactive and easier to integrate with CSS transitions and animations.

Some of the techniques shown below are used to handle the animation.

• React Transition Group

• CSS transitions and animations

• React Motion

Why use Animation in React?

Animations help React applications mainly focus on a better user experience and improve the performance of the user interface.

1) Improve user experience:

This provides a better user interface using the states and transitions. It can also manage the fast-loading time without decreasing the effect of animations.

2) Provide Visual feedback:

This helps to achieve a better understanding of what actions to perform. If the user submits a form, display the symbol that something is wrong behind the scenes.

3) Better Performance:

Animations offer a better performance because React uses the virtual DOM. With the use of React Spring and Framer Motion, you can easily manage efficiently.

4) Efficient State Management:

This can be easily managing the state transitions because Framer Motion handles the layout animations that animate and fetch only these elements to perform the modified position.

Common CSS Animations in React:

Common CSS methods are used for performing animations like CSS keyframes and transitions.

1) Using CSS Keyframes:

It helps manage the complex animations.

Example

Code:

import React from "react";
import "./App.css";
function AniLogo() {
return (
<div className="container">
<h2 className="title">React Animation Example</h2>
<p className="subtitle">
Simple animations using CSS keyframes in a React component.
</p>
<div className="shapes">
<div className="circle"></div>
<div className="square"></div>
<div className="triangle"></div>
</div>
<div className="info-box">
<p>
Animations make your React app more interactive and visually
appealing. You can use CSS keyframes or libraries like Framer Motion
for complex effects.
</p>
</div>
<button className="btn">Click Me</button>
</div>
);
}
export default AniLogo;

With CSS:

body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #8e2de2, #4a00e0);
font-family: Arial, sans-serif;
color: white;
}
.container {
text-align: center;
}
.title {
margin-bottom: 20px;
font-size: 24px;
letter-spacing: 1px;
}
.circle {
width: 120px;
height: 120px;
background: #61dafb;
border-radius: 50%;
animation: rotateScale 3s infinite ease-in-out;
}
/* Animation keyframes */
@keyframes rotateScale {
0% {
transform: rotate(0deg) scale(1);
background: #61dafb;
}
50% {
transform: rotate(180deg) scale(1.3);
background: #ff6b6b;
}
100% {
transform: rotate(360deg) scale(1);
background: #61dafb;
}
}

2) Animation Uses in Fade:

It is used for performing the side effects in React and web design. This can be easily increasing the element opacity from 0 to 1, making it flexible and enhancing the effect.

Example

Code:
import React, { useState } from "react";
import "./App.css";
function App() {
const [show, setShow] = useState(false);
return (
<div className="container">
<button onClick={() => setShow(!show)}>
{show ? "Hide Box" : "Show Box"}
</button>
{show && <div className="box"></div>}
</div>
);
}
export default App;

With CSS file:
container {
text-align: center;
margin-top: 50px;
}
.box {
width: 150px;
height: 150px;
background-color: #4b7bec;
margin: 20px auto;
animation: fadeIn 1s ease-in;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}

React Motion:
This provides a physics-based approach for making natural and smooth animations. If you want to use this, firstly, you can install this with npm install --save react-motion.

Example

Code:
import React from "react";
import { motion } from "framer-motion";
function FadeIn() {
return (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1.5 }}
style={{
textAlign: "center",
marginTop: "50px",
fontSize: "24px",
fontWeight: "bold",
}}
>
Smooth Fade-In Animation
</motion.div>
);
}
export default FadeIn;

AutoAnimate React:

It gives a simpler, automated method for handling the animations in your React applications. With the use of this, you can perform the addition, modification, and removal of child to parent elements. You can install this with npm install @formkit/auto-animate.

Example

Code:

import React, { useState } from "react";
import { useAutoAnimate } from "@formkit/auto-animate/react";
function TodoList() {
const [parent] = useAutoAnimate();
const [tasks, setTasks] = useState(["Learn React", "Read Docs"]);
const addTask = () => {
setTasks([...tasks,New Task ${tasks.length + 1}]);
};
const removeTask = (index) => {
setTasks(tasks.filter((_, i) => i !== index));
};
return (
<div style={{ textAlign: "center", marginTop: "40px" }}>
<button onClick={addTask}>Add Task</button>
<ul ref={parent} style={{ listStyle: "none", padding: 0 }}>
{tasks.map((task, index) => (
<li
key={index}
onClick={() => removeTask(index)}
style={{
margin: "10px 0",
padding: "8px 12px",
background: "#ececec",
borderRadius: "8px",
cursor: "pointer",
width: "200px",
marginInline: "auto",
}}
>
{task}
</li>
))}
</ul>
</div>
);
}
export default TodoList;

React Transition Group:

With the use of Animations, you can perform component removal and mounting to the DOM element. You can install this with npm install react-transition-group.

Example

Code:

import React, { useState } from "react";
import { CSSTransition } from "react-transition-group";
import "./App.css";
function App() {
const [show, setShow] = useState(false);
return (
<div className="container">
<button onClick={() => setShow(!show)}>
Toggle Animation
</button>
<CSSTransition
in={show}
timeout={500}
classNames="slide"
unmountOnExit
>
<div className="box"></div>
</CSSTransition>
</div>
);
}
export default App;

With CSS file:

box {
width: 150px;
height: 150px;
background-color: #20bf6b;
margin: 20px auto;
}
.slide-enter {
opacity: 0;
transform: translateY(-30px);
}
.slide-enter-active {
opacity: 1;
transform: translateY(0);
transition: all 500ms ease;
}
.slide-exit {
opacity: 1;
}
.slide-exit-active {
opacity: 0;
transform: translateY(30px);
transition: all 500ms ease;
}


Combining React Router and Animation:

Page transitions are used to perform the best animation between the routes.

Example

Code:

import { BrowserRouter as Router, Routes, Route, Link, useLocation } from "react-router-dom";
import { AnimatePresence, motion } from "framer-motion";
import React from "react";
function Page({ text }) {
return (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.5 }}
style={{ textAlign: "center", marginTop: "100px", fontSize: "2rem" }}
>
{text}
</motion.div>
);
}
function AnimatedRoutes() {
const location = useLocation();
return (
<AnimatePresence mode="wait">
<Routes location={location} key={location.pathname}>
<Route path="/" element={<Page text="Home Page" />} />
<Route path="/about" element={<Page text="About Us" />} />
</Routes>
</AnimatePresence>
);
}
function App() {
return (
<Router>
<nav style={{ textAlign: "center", marginTop: "20px" }}>
<Link to="/" style={{ margin: "10px" }}>Home</Link>
<Link to="/about" style={{ margin: "10px" }}>About</Link>
</nav>
<AnimatedRoutes />
</Router>
);
}
export default App;

Conclusion:

I hope this article gives a better understanding of React Animation | Adding Motion to Your React Apps from beginner to professional-level developers. Motion in React applications is our best way to manage a better user experience. React supports several tools, such as Framer Motion and React Spring manage that help developers make from simple to difficult.

I suggest you a website, Tpoint Tech that gives you to complete ReactJS tutorials with deeply explanations, real-life examples, and generally asked interview questions to upgrade your skills.