An Introduction to How to Implement React Motion

/, Uncategorized/An Introduction to How to Implement React Motion

An Introduction to How to Implement 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.

 

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”;

 

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.

// …

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.

 

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

 

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

 

Also read: Using grommet in React Application

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.

 

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.

Summary
Complete Guide to React Motion
Article Name
Complete Guide to React Motion
Description
React Native is enriched with many libraries that make the developers working easy. In those libraries, react motion is the prime library for integrating animations. It brings out a realistic concept in the react application. This also simplifies the working approach of developers. Professionals could easily use react motion with the style component library.
Author
Publisher Name
Latitude Technolabs
Publisher Logo
By | 2021-11-24T04:57:15+00:00 October 23rd, 2021|React Native App, Uncategorized|0 Comments