In this article, we will learn how to use configs using React Spring. React spring is an animation library that makes animating UI elements simple. It is based on spring physics which helps it to achieve a natural look and feel. It is different from other animation libraries where someone has to deal with curves, easing, and time durations, all of which are in sync with each other.
Platforms: React spring is a cross-platform library, it supports react, react-native, web, and many more platforms. It also has support for all browsers.
Configs: React Spring animation is configurable so if you want to adjust something in the animation then you can easily do it by using configs and useSpring.
Syntax:
useSpring({ config: { duration: ... }, ... })
Property Used:
| Property-Name | Default | Description |
|---|---|---|
| mass | 1 | This property is used to define the mass. |
| tension | 170 | This property is used to define the tension. |
| friction | 26 | This property is used to define friction. |
| clamp | false | This property is used to stop that the spring once it overshoots its boundaries |
| precision | 0.01 | This property is used to define the precise value of the animation. |
| velocity | 0 | This property is used to define the velocity of the animation. |
| easing | t => t | This property is used to set the easing by default it is set to linear. |
| damping | 1 | This property is used to set the damping ratio, which dictates how the spring slows down. Only works when the frequency is defined by default to 1. |
| progress | 0 | This property is used to decide how far into the easing function to start. |
| duration | undefined | This property is used to define the duration of the animation |
| decay | undefined | This property is used to set the decay of the animation. |
| frequency | undefined | This property is used to set the frequency of the animation |
| round | undefined | This property is used to set the number of rounds. |
| bounce | undefined | This property is used to define the spring will bounce instead of overshooting when exceeding its goal value when its value is above zero. |
| restVelocity | undefined | This property is used to define the smallest velocity before the animation is considered to be “not moving” and when undefined, precision is used instead. |
Example1: In the below code, we will use the above syntax to demonstrate the config.
GFG.jsx
Javascript
import React from 'react'; import { useSpring, animated, easings } from 'react-spring' function EasingComponent() { const { background, rotateZ } = useSpring({ from: { background: '#46e891', rotateZ: 0, }, to: { background: '#277ef4', rotateZ: 225, }, config: { duration: 2000, easing: easings.easeInOutQuart, }, loop: { reverse: true }, }) return ( <animated.div style={{ backgroundColor: 'd6d6d6', borderRadius: 16, boxShadow: 'rgb(0,0,0,0.44) 0px 5px 5px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'green', margin: 250, background, width: 120, rotateZ, }} >GFG</animated.div> ) } export default EasingComponent; |
App.js
Javascript
import React from 'react'import GFG from './GFG' function App() { console.log('hello') return ( <> <GFG /> </> ); } export default App; |
Output:
Example2: In the below code, we will make use of the above syntax to demonstrate the config in reverse manner.
GFG.jsx
Javascript
import React from 'react'; import { useSpring, animated, easings } from 'react-spring' function EasingComponent() { const { background, rotateZ } = useSpring({ from: { background: '#46e891', rotateZ: 0, }, to: { background: '#277ef4', rotateZ: 225, }, config: { duration: 2000, easing: easings.easeInOutQuart, }, loop: true, }) return ( <animated.div style={{ backgroundColor: 'd6d6d6', borderRadius: 16, boxShadow: 'rgb(0,0,0,0.44) 0px 5px 5px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'green', margin: 250, background, width: 120, height: 150, rotateZ, }} >GFG</animated.div> ) } export default EasingComponent; |
App.js
Javascript
import React from 'react'import GFG from './GFG' function App() { console.log('hello') return ( <> <GFG /> </> ); } export default App; |
Output:
Reference: https://react-spring.dev/common/configs
