React Spring Configs

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/docs/advanced/config

Syntax:

Property Used:

Explore