Get to know about React Motion

React Native has many libraries that simplify the operation of developers and designers. That React Motion is strongly associated with realistic animation. Using this library, a developer can easily create realistic animations in the react application.

In this blog, we will give you a full explanation of React Motion installation and its use. Following this guidance, it will be easy for you to implement natural-looking animations. So if you are curious to unlock the full react motion concepts then keep your presence here.

Installing React Motion

To install the react motion you need to create a new React project by running it. For this purpose, you need to use React motion npn.

npx create-react-app intro-react-motion 

To install the react motion you need to run the following command

npm i react-motion 

To include realistic animations, react-motion exports the following.

Spring – This is a helper function that shows the way of component animates
Presets – This is an object of predefined animation properties
Motion – This component is used to animate the other component
TransitionMotion – A component that is used to animate the mount and unmounts of the components.
StaggeredMotion – This is a component used to animate the components whose animation depends on each other.

Also read: React 18 features

In this blog for the explanation, we will consider only spring, motion and presets.

Helpers: spring () and presets

The spring() helper function identifies how to animate from the initial style value to the last destination value. For this purpose, it takes two arguments, one is the value, and another one is an option animation config parameter.

For instance, we consider spring(20, {stiffness: 120, damping: 40}) animates the value to 20 with the stiffness of 120 and damping 40. Stiffness and damping will define the behaviour.

The main use of presets properties is like animation configuration.
Spring(20, presets.wobbly)

The Motion component

The two props defaultStyle and style are taken by component. The defaultStyle prop defines the style object’s initial values. A style prop is an object that defines the style value at any given point. With the help of the spring() helper function, the values of the style prop are identified. If there is an original style in defaultStyle then the style will be the final style that the components animate. The components always use render prop patterns. Until the animation is completed, the function receives an interpolated style object that contains the style value.

<<Motion
defaultStyle={{
scale: 0,
translateX: -300
}}
style={{
scale: spring(1),
translateX: spring(0, presets.stiff)
}}
>
{interpolatesStyles => <>{/* React Component */}</>}
</Motion> 

To create the card we need to write following code

Importing files in React Motion

Now we will import Motion, spring and presets at the top of the component file from the react-motion library. In this way, you will use them in the component.

Import {Motion, spring, presets} from “react-motion”;

Create an <h1> element in the component and this will animate inside app.js
/ ...
function App() {
return (
<div className="App">
<div>
<h1>Basic Animation Example</h1>
</div>
</div>
);
}
// ... 

Later on wrap the component with the <motion /> component and then return the <h1> component from the render prop function. Pass {opacity: 0, translateY: 20 } in the defaultStyle prop. To interpolate the style values just use the spring() helper function in the style prop.

// …
<Motion
defaultStyle={{
opacity: 0,
translateY:  20
}}
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>
// ...
So the final code will be as follow
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: 20
}}
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; 

Now run the following command to see the above code.

npm start 

Triggering of animation using the button

While using the state you can dynamically add the style to interpolate the style values. Store the initial style for the animation in a variable.

function App() {
const [startAnimation, setAnimation] = useState(false);
const initialStyle = { opacity: 0, translateY: 20 };
// ...
}
You don’t have to specify the defaultStyle prop in the <Motion  /> component. It is because the style prop will 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>
// ...

Now add two buttons one is to reset the animation and another one is to trigger the animation

// ...
<button onClick={() => setAnimation(true)}>Trigger Animation</button>
<button onClick={() => setAnimation(false)}>Reset Animation</button>
// ... 

The style prop will get the initial style values when the startAnimation state is set to true. On the other hand, it will have the final values when it is set to false.

The App.js will look like 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: 20 };
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>
);
} 

Use of React Motion with styled-components

You can easily use the react-motion with any other UI library for the react. Here we will guide you on how you can easily use the react-motion with the style-component library.


npm I styled-components
Create the styled
)}
Therefore the complete App.js APJ will be like below:
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: 30px;
${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 (
{interpolatedStyles => ()}
setAnimation(true)}>Trigger Animation
setAnimation(false)}>Reset Animation
);
}
As long as the library supports the custom styling, the react motion will work regardless of the library use.
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"
}
//...
Now finally run
npm i 

Last word

Flutter is a very helpful platform that helps in developing an app with less coding. It is on the mass adoption in the market as most of the professionals avail its features. Most of the professionals are showing interest in this platform to reduce effort and time. Talking about the future, it might capture a good market.

If you are looking forward to hiring a react developer then don’t hesitate to contact Latitude Technolabs.

Share This Story, Choose Your Platform!