Animating With react-motion

In web applications to make the website or the web page more attractive and to enhance the user experience animation is used. These animations can be performed with the help of react-motion, which is the popular library of react applications.

What is React-Motion?

React-Motion is a popular animation library for React that allows developers to create smooth, natural animations in their applications. React-Motion provides an easy-to-use API for defining animations.

• Physics-Based Animations: Uses spring physics to create natural and fluid animations.
• Declarative API: Provides a straightforward, declarative API for defining animations.
• Staggered Animations: Easily create staggered animations with StaggeredMotion.
• Flexible: This can be used to animate a variety of properties and components, providing high flexibility.

Key Concepts in React Motion

• Motion Component: The core component of React-Motion, used to define and apply animations.
• Spring Function: Defines the spring configuration for animations, including stiffness and damping.
• Stiffness and Damping: Higher stiffness makes the animation faster, while higher damping reduces oscillation.

Steps to implement Animation with react-motion.

Step 1: Create a react project.

npx create-react-app react-app
cd react-app

Step 2: install react-motion and update dependencies.

npm install react-motion

Updated dependencies

"dependencies": {           
    "react": "^18.3.1",
    "react-dom": "^18.3.1", 
    "react-motion": "^0.5.2", 
    "react-scripts": "5.0.1", 
    "web-vitals": "^2.1.4"
 }

Folder Structure

To demonstrate creating a simple animation that moves a box from left to right using the react -motion.

// src/Box.js
import React from 'react';
import { Motion, spring } from 'react-motion';

const Box = () => {
    return (
        <Motion defaultStyle={{ x: 0 }} style={{ x: spring(200) }}>
            {style => (
                <div style={{
                    transform: `translateX(${style.x}px)`,
                    width: '100px',
                    height: '100px',
                    backgroundColor: 'blue'
                }}>
                </div>
            )}
        </Motion>
    );
};

export default Box;

// src/App.js
import React from 'react';
import Box from './Box';

function App() {
    return (
        <div className="App">
            <h1>React-Motion Example</h1>
            <Box />
        </div>
    );
}

export default App;

Output

In this example

• The box components uses React-Motion to animate a div, moving it 200px along the X-axis smoothly using the spring function.
• Motion component from react-motion takes defaultStyle (initial position: x: 0) and updates style (target position: x: 200).
• The transform: translateX(${style.x}px) inside style dynamically updates the div position based on animation progress.
• The App component renders a heading "React-Motion Example" and includes the Box component, triggering the animation on render.

Advanced Usage

For the complex animations, we can use the StaggeredMotion and TransitionMotion components:

• StaggeredMotion: With staggered start times animate the sequence of components.
• TransitionMotion: For dynamic lists, they can handle enter and exit animations.

To demonstrate creating a staggeredBoxes component using the react motion

// src/StaggeredBoxes.js
import React from 'react';
import { StaggeredMotion, spring } from 'react-motion';

const StaggeredBoxes = () => {
    const defaultStyles = [{ x: 0 }, { x: 0 }, { x: 0 }];
    const finalStyles = prevStyles =>
        prevStyles.map((_, i) => {
            return i === 0
                ? { x: spring(200) }
                : { x: spring(prevStyles[i - 1].x) };
        });

    return (
        <StaggeredMotion defaultStyles={defaultStyles}
            styles={finalStyles}>
            {interpolatedStyles =>
                <div>
                    {interpolatedStyles
                        .map((style, i) =>
                            <div key={i} style={{
                                transform: `translateX(${style.x}px)`,
                                width: '100px',
                                height: '100px',
                                backgroundColor: 'blue',
                                margin: '10px'
                            }}>
                            </div>
                        )}
                </div>
            }
        </StaggeredMotion>
    );
};

export default StaggeredBoxes;

// src/App.js
import React from 'react';
import StaggeredBoxes from './StaggeredBoxes';

function App() {
    return (
        <div className="App">
            <h1>React-Motion Example</h1>
            <StaggeredBoxes />
        </div>
    );
}

export default App;

Output

In this example

• The StaggeredBoxes component (likely using React-Motion) is used inside the App component to create a staggered animation effect.
• The App component renders a heading "React-Motion Example" and includes the StaggeredBoxes component.
• When the app loads, StaggeredBoxes executes its animation logic, likely animating multiple elements with a staggered delay.
• StaggeredBoxes is a separate component, making the animation logic modular and reusable across different parts of the application.

Use Cases of React Motion

• Loading Indicators: To enhance the user experience create smooth, dynamic loading spinners and progress bars.
• Page Transitions: In the single-page applications implement seamless transitions between different views.
• List Animations: For dynamic content updates use TransitionMotion to animate items entering or leaving a list.
• Interactive UI Elements: To make more responsive and interactive use animate buttons, cards.

prahladgaur0711

Follow

Improve

Article Tags :

• Web Technologies
• ReactJS
• Node-npm
• React-Animation