React Motion is an animation library for React applications that makes it easy to create and implement realistic animations. In this guide, we’ll demonstrate how to install the library and share some basic tips to help you build natural-looking, physics-based animations for your React projects.
Installing React Motion
Create a new React project by running:
npx create-react-app intro-react-motion
To install React Motion, run the following command inside your project root.
npm i react-motion
Understanding the exports
The react-motion library exports the following.
spring— A helper function that dictates how the component animatespresets— An object of predefined animation propertiesMotion— A component that is used to animate a componentStaggeredMotion— A component that is used to animate components whose animation depends on each otherTransitionMotion— A component that is used to animate the mount and unmounts of components
For the sake of brevity, this guide will focus on spring, presets, and Motion.
Helpers: spring() and presets
The spring() helper function defines how to animate from the initial style value to the destination value. It takes in two arguments: the value and an option animation config parameter.
For example, spring(10, { stiffness: 130, damping: 42 }) animates the value to 10 with a stiffness of 130 and damping of 42. stiffness and damping are animation properties that define the animation’s behavior. Don’t worry — it’s normal not to understand how these properties work.
The presets properties are used as the animation configuration. For example, spring(25, presets.wobbly). Other preset values include presets.gentle, presets.noWobble, presets.stiff.
The <Motion /> component
The <Motion /> component takes in two props: defaultStyle and style. The defaultStyle prop defines the initial values of the style object. The style prop is an object that defines the style values at any given point. The values of the style prop are determined using the spring() helper function. If the defaultStyle is the original style, then style is the final style that the components animate to.
The <Motion /> component expects a function as its child prop, which means it uses the render prop pattern. The function receives an interpolated style object, which contains the style value at any given time until the animation is completed.
<<Motion
defaultStyle={{
scale: 0,
translateX: -300
}}
style={{
scale: spring(1),
translateX: spring(0, presets.stiff)
}}
>
{interpolatesStyles => <>{/* React Component */}</>}
</Motion>
React Motion in action
Let’s look at a basic example.
At the top of your component file, import Motion, spring, and presets from the react-motion library to use them in your component.
import { Motion, spring, presets } from "react-motion";
Create an <h1> element in the component that will be animated inside App.js.
// ...
function App() {
return (
<div className="App">
<div>
<h1>Basic Animation Example</h1>
</div>
</div>
);
}
// ...
Now wrap your component with the <Motion /> component and return the <h1> component from the render prop function. Pass { opacity: 0, translateY: 30 } in the defaultStyle prop. In the style prop, use the spring() helper function to interpolate the style values.
// ...
<Motion
defaultStyle={{
opacity: 0,
translateY: 30
}}
style={{
opacity: spring(1),
translateY: spring(0, presets.wobbly)
}}
>
{interpolatedStyles => (
<div
style={{
transform: `translateY(${interpolatedStyles.translateY}px)`,
opacity: interpolatedStyles.opacity
}}
>
<h1>Basic Animation Example</h1>
</div>
)}
</Motion>
// ...
Here’s the final code:
import React from "react";
import "./styles.css";
import { Motion, spring, presets } from "react-motion";
function App() {
return (
<div className="App">
<Motion
defaultStyle={{
opacity: 0,
translateY: 30
}}
style={{
opacity: spring(1),
translateY: spring(0, presets.wobbly)
}}
>
{interpolatedStyles => (
<div
style={{
transform: `translateY(${interpolatedStyles.translateY}px)`,
opacity: interpolatedStyles.opacity
}}
>
<h1>Basic Animation Example</h1>
</div>
)}
</Motion>
</div>
);
}
export default App;
Run the following command to see the above code in action.
npm start
The animation will start as soon as the component mounts on to the DOM. Now let’s see how you can also trigger the animation with a button click.
Learn more →Triggering animation using a button
Using state, you can add style dynamically to interpolate the style values. In a variable, store the initial style for the animation.
function App() {
const [startAnimation, setAnimation] = useState(false);
const initialStyle = { opacity: 0, translateY: 30 };
// ...
}
In the <Motion /> component, you don’t have to specify the defaultStyle prop because the style prop is going to change dynamically.
// ...
<Motion
style={
startAnimation
? {
opacity: spring(1),
translateY: spring(0, presets.wobbly)
}
: initialStyle
}
>
{interpolatedStyles => (
<div
style={{
transform: `translateY(${interpolatedStyles.translateY}px)`,
opacity: interpolatedStyles.opacity
}}
>
<h1>Triggered Animation</h1>
</div>
)}
</Motion>
// ...
Add two buttons: one to trigger the animation and another to reset the animation.
// ...
<button onClick={() => setAnimation(true)}>Trigger Animation</button>
<button onClick={() => setAnimation(false)}>Reset Animation</button>
// ...
When the startAnimation state is set to true, the style prop will get the initial style values. When it sets to false, the style prop will have the final values.
Your App.js should look as follows.
import React, { useState } from "react";
import "./styles.css";
import { Motion, spring, presets } from "react-motion";
export default function App() {
const [startAnimation, setAnimation] = useState(false);
const initialStyle = { opacity: 0, translateY: 30 };
return (
<div className="App">
<Motion
style={
startAnimation
? {
opacity: spring(1),
translateY: spring(0, presets.wobbly)
}
: initialStyle
}
>
{interpolatedStyles => (
<div
style={{
transform: `translateY(${interpolatedStyles.translateY}px)`,
opacity: interpolatedStyles.opacity
}}
>
<h1>Triggered Animation</h1>
</div>
)}
</Motion>
<button onClick={() => setAnimation(true)}>Trigger Animation</button>
<button onClick={() => setAnimation(false)}>Reset Animation</button>
</div>
);
}
Using React Motion with styled-components
You can use react-motion with any other UI library for React. Let’s see how you can use react-motion with the styled-components library.
Install styled-components by running the following command inside your project root.
npm i styled-components
Create the styled <Title /> component as follows.
More great articles from LogRocket:
- Don't miss a moment with The Replay, a curated newsletter from LogRocket
- Learn how LogRocket's Galileo cuts through the noise to proactively resolve issues in your app
- Use React's useEffect to optimize your application's performance
- Switch between multiple versions of Node
- Discover how to animate your React app with AnimXYZ
- Explore Tauri, a new framework for building binaries
- Compare NestJS vs. Express.js
// ..
import styled from "styled-components";
const Title = styled.h1`
color: #007bff;
font-size: 32px;
${props =>
`transform: translateY(${props.translateY}px);
opacity: ${props.opacity};
`}
`;
// ..
Similar to the above examples, return the <Title /> component from the render prop function. Pass the interpolated values as props to the <Title /> component.
<Motion
style={
startAnimation
? {
opacity: spring(1),
translateY: spring(0, presets.wobbly)
}
: initialStyle
}
>
{interpolatedStyles => (
<Title
opacity={interpolatedStyles.opacity}
translateY={interpolatedStyles.translateY}
>
Triggered Animation
</Title>
)}
</Motion>
Your complete App.js should look as follows.
import React, { useState } from "react";
import "./styles.css";
import { Motion, spring, presets } from "react-motion";
import styled from "styled-components";
const Title = styled.h1`
color: #007bff;
font-size: 32px;
${props =>
`transform: translateY(${props.translateY}px);
opacity: ${props.opacity};
`}
`;
export default function App() {
const [startAnimation, setAnimation] = useState(false);
const initialStyle = { opacity: 0, translateY: 30 };
return (
<div className="App">
<Motion
style={
startAnimation
? {
opacity: spring(1),
translateY: spring(0, presets.wobbly)
}
: initialStyle
}
>
{interpolatedStyles => (
<Title
opacity={interpolatedStyles.opacity}
translateY={interpolatedStyles.translateY}
>
Triggered Animation
</Title>
)}
</Motion>
<button onClick={() => setAnimation(true)}>Trigger Animation</button>
<button onClick={() => setAnimation(false)}>Reset Animation</button>
</div>
);
}
Regardless of which library you are using, react-motion will work as long as the library supports custom styling.
If you encounter errors, depreciated warnings, or things that don’t run as expected, revert to the original versions of these libraries by replacing your dependencies inside package.json file with the following versions.
//...
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-motion": "^0.5.2",
"react-scripts": "3.4.0",
"styled-components": "^5.0.1"
}
//...
Then run:
npm i
This will install the exact same dependencies on which these examples were tested.
Conclusion
React Motion is one of the easiest animation libraries out there for animating components in React. This was just a brief introduction to the react-motionlibrary. As a next step, I would recommend looking into components such as <StaggeredMotion /> and <TransitionMotion />, which are similar to the <Motion /> component but have an advanced implementation for more complex animations.
Cut through the noise of traditional React error reporting with LogRocket
LogRocket is a React analytics solution that shields you from the hundreds of false-positive errors alerts to just a few truly important items. LogRocket tells you the most impactful bugs and UX issues actually impacting users in your React applications.
LogRocket
automatically aggregates client side errors, React error boundaries, Redux state, slow component load times, JS exceptions, frontend performance metrics, and user interactions. Then LogRocket uses machine learning to notify you of the most impactful problems affecting the most users and provides the context you need to fix it.
Focus on the React bugs that matter — try LogRocket today.
