React Spring: An wonderful animation library for Reactjs developers
React spring
React spring is an astonishing animation library for reactjs developers. It enables the animation while keeping in mind the laws of physics. It gives you a flexible approach and confidence to implement your animation idea on the UI elements. React spring covers almost all the resources you will need to implement animation over the components. It is an advanced approach to the use of animations.
React spring is a combination of animate’s string interpolation and productivity. Also, it consists of the ease of react-motion. Here animate and react-motion both are different platforms but react spring connects both of them seamlessly. This library will surprise you from the simplicity of the casting of the static data. This is done with the use of an explicit utility function that will not affect the animation with the usage.
Supported Platforms
React spring is a cross-platform animation library. This library supports every react bullied like react-native, react-native-web, and every other.
Supported Browsers
React spring has a module that is compiled for every available browser over the web. The browser list for configuration is as follows >1%, not dead, not ie 11, not op_mini all. If you have a target that does not deal with the legacy modules, then you will need to install it using commonjs. This is implemented by writing .cjs while importing.
Why use React Spring
In react spring, you are working with spring. This spring denotes the time and duration of the animation. Here animation is looked from the perspective of time and curves. This is the most challenging thing that has been made possible by react spring. Because making things move naturally is the most difficult task while creating animations.
We make time-specified animation that includes distinct undefined curves, easing, curve falls, and syncing all this correctly. Because of our struggle, we make the animations look very natural, and the approach is also simplified. The animation of react is not dependent on rendering by react. Hence it does not rely on react for changing the animation frame by frame.
As react spring is a physics-based animation library, it uses spring energy to recover the animation. Assume the animation is canceled before completing. Then the react spring will smoothly bring the element back to its initial motion. React spring is very simple to understand and code on every platform. For this, you are supposed to exchange the properties for the props of the component.
Installation of react spring
To install react spring in your React project, you will need to execute the following command.
npm install react-spring
Hooks used in React spring
Usespring — this has a single spring value that moves the data from one object to another.
Usesprings — this is a multiple spring hook, that will transfer the data of an object to another
useTrail — this is used for following a trail of objects one behind another. This is used for multiple springs
useTransition — this hook is used for adding or removing transitions
useChain — it is used to add multiple animations at once
the hook useSpring is explained below:
import {useSpring, animated} from ‘react-spring’
function App() {
const props = useSpring({opacity: 1, from: {opacity: 0}})
return <animated.div style={props}>I will fade in</animated.div>
}
In the above code, the sueSpring hook is imported initially with the use of this structure:
import {useSpring, animated} from ‘react-spring’
In the syntax, the animation library animate is used for adding effective animations. The animate library renders the functions outside the react library. This is done because of adding extended performance to the animations. Another reason to use the animate library is to pass the props of the component. Animate helps react to get the properties that are extended to it.
Next, you will need to add the spring to the elements. This spring will change the values of the animation from one value to another one. The values that are mentioned in the spring are accumulative, which means all the data is recorded. Also, you can use any kind of names except for some keywords like form and to. Besides, the props that are passed are not accessible for use in standard div tags. This is because they are dynamic values.
After this, you will need to install the animation to the screen
return <animated.div style={props}>I will fade in</animated.div>
In this, the prop of the component is structured. Also, you will need to mention the extension of the native element that you are using. For instance, you are operating on the web then you can use the HTML elements like divs, spans, svgs, etc. You can do exactly the same with the components, stylized components, and elements of different platforms with this :
const AnimatedDonut = animated(Donut)
// React-native
const AnimatedView = animated(View)
// styled-components, emotion, etc.
const AnimatedHeader = styled(animated.h1)`
…;
`
Interpolation management
React spring has an effective function to add and set the animation values of the components. You can extrapolate or specify the values of every animate component from the view tab. This is an exceptional capability to react spring. The interpolated function accepts every function or an object from the large coaction of the function. These interpolations are able to make a large string of objects that are used for routing.
Even though interpolating can be performed inside a sting. The view interpolation is a much faster technique and less space occupying.
import {useSpring, animated, interpolate} from ‘react-spring’
const {o, xyz, color} = useSpring({
from: {o: 0, xyz: [0, 0, 0], color: ‘red’},
o: 1,
xyz: [10, 20, 5],
color: ‘green’
})
return (
<animated.div
style={{
// If you can, use plain animated values like always, …
// You would do that in all cases where values “just fit”
color,
// Unless you need to interpolate them
background: o.interpolate(o => `rgba(210, 57, 77, ${o})`),
// Which works with arrays as well
transform: xyz.interpolate((x, y, z) => `translate3d(${x}px, ${y}px, ${z}px)`),
// If you want to combine multiple values use the “interpolate” helper
border: interpolate([o, color], (o, c) => `${o * 10}px solid ${c}`),
// You can also form ranges, even chain multiple interpolations
padding: o.interpolate({range: [0, 0.5, 1], output: [0, 0, 10]}).interpolate(o => `${o}%`),
// Interpolating strings (like up-front) through ranges is allowed …
borderColor: o.interpolate({range: [0, 1], output: [‘red’, ‘#ffaabb’]}),
// There’s also a shortcut for plain, optionless ranges …
opacity: o.interpolate([0.1, 0.2, 0.6, 1], [1, 0.1, 0.5, 1])
}}
>
{o.interpolate(n => n.toFixed(2)) /* innerText interpolation … */}
</animated.div>
)
Final Verdict
React spring is one of the most popular tools used for animations to react. With the use of physics in terms of animation, it creates real-life animation for you. In React spring, you can specify the timing of the animation, its path, and other properties. All such data is used, and an animation is created that is extensively similar to the real world.
