Intorduction to React Motion
Animation plays a vital role in modern web development, enhancing user experience and adding a layer of interactivity to web interfaces. React Motion is a popular animation library specifically designed for React applications.
This article will explore React Motion in detail, covering its key features, benefits, usage, and examples.
Table of Content
- What is React Motion?
- Key Features of React Motion
- Benefits of Using React Motion
- Step-by-step Installing React project & React-motion
- The
component - Approach
What is React Motion?
React Motion is a JavaScript library that enables developers to create smooth and fluid animations in React applications. Unlike traditional CSS animations or transitions, React Motion utilizes physics-based animations using springs, resulting in more natural and realistic motion effects. It abstracts complex animation logic and provides a declarative API for defining animations within React components.
Key Features of React Motion
- Spring Physics: Utilizes spring-based animations for natural and realistic motion effects.
- Declarative API: It describes animations using JSX syntax, aligning well with React’s component model.
- Component-Based: Encapsulates animations within reusable components, promoting modularity.
- Interpolation: Smoothly transitions values over time, enabling seamless animations between states.
- Advanced Controls: Provides precise control over animation parameters like duration, delay, and callbacks.
Benefits of Using React Motion
- Smooth Animations: Creates fluid and natural animations compared to CSS transitions.
- Complex Animation Handling: Simplifies creation of complex animations and interactions.
- Enhanced User Experience: Adds visual feedback, guiding user interactions for better engagement.
- Responsive Design: Adapts animations seamlessly to different screen sizes and devices.
- Code Reusability: Promotes reuse of animation components, improving development efficiency.
Step-by-step Installing React project & React-motion
Step 1: Create a new React project by running the below command line:
npx create-react-app my-react-motion
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Step 3: Install required Dependencies
npm i react-motion
Project Structure:
The updated dependencies in package.json file after installing required modules.
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-motion": "^0.5.2",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
The <Motion/>component:
The <motion/> component takes in two advantage: defaultStyle and style.The defaultStyle advantage definnes the initail of the style object while style props is an object that defines the style values at any given point.style determined using the spring() helper function.
Approach:
- Use the
useState
hook to manage the hover state of the card. This state will track whether the card is being hovered over or not. - Utilize the
onMouseEnter
andonMouseLeave
events on the card container to toggle the hover state based on user interaction. - Import
Motion
andspring
from ‘react-motion’ to create smooth animations. Define animation logic usingspring
for transitioning the card’s rotation based on the hover state. - In the JSX, apply the
transform
property to the card based on the animatedrotateY
value provided by React Motion. - Ensure that your CSS styles support the flip animation by setting up transitions, perspective, and backface visibility appropriately.
Eample: This example shows the use of motion component.
/* App.css */
.app {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.title {
margin-bottom: 20px;
font-family: Arial, sans-serif;
}
.card-container {
perspective: 1000px;
}
.card {
width: 200px;
height: 300px;
position: relative;
transform-style: preserve-3d;
transition: transform 0.5s ease;
}
.front,
.back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: white;
border-radius: 8px;
}
.front {
background-color: #3498db;
}
.back {
background-color: #2ecc71;
transform: rotateY(180deg);
}
//App.js
import React, { useState } from 'react';
import { Motion, spring } from 'react-motion';
import './App.css';
const App = () => {
const [isHovered, setIsHovered] = useState(false);
return (
<div className="app">
<h1 className="title">
Card Flip Animation
</h1>
<div
className="card-container"
onMouseEnter={
() => setIsHovered(true)}
onMouseLeave={
() => setIsHovered(false)}>
<Motion
defaultStyle={{ rotateY: 0 }}
style={{
rotateY: spring(isHovered ? 180 : 0,
{ stiffness: 120, damping: 10 }) }}>
{({ rotateY }) => (
<div
className="card"
style={{
transform: `rotateY(${rotateY}deg)`,
}}>
<div className="front">Front</div>
<div className="back">Back</div>
</div>
)}
</Motion>
</div>
</div>
);
};
export default App;
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Contact Us