React Spring From Prop

In this article, we learn how From prop works 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.

From Prop: It used to define the initial point of the animation.

Syntax:

from: { initial point }

Steps to create a React App are:

Step 1: Create a new application using the following command.

npx create-react-app reactspringdemo

Step 2: Now move the created project folder using the following command.

cd reactspringdemo

Step 3: Install the react spring library.

npm install react-spring

Example1: In the below code, we will use the above syntax to demonstrate the use of the From prop.

GFG.jsx

JavaScript

import { useSpring, animated } from 'react-spring'

function FromProp() {
    const styles = useSpring({
        loop: true,
        from: { rotateZ: 0 },
        to: { rotateZ: 180 },
    })

    return (
        <animated.div
            style={{
                width: 80,
                height: 80,
                backgroundColor: 'lightgreen',
                borderRadius: 100,
                boxShadow: 'rgb(0,0,0,0.44) 0px 5px 5px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                color: 'green',
                margin: 250,
                ...styles
            }} >GFG</animated.div>
    )
}
export default FromProp;

App.js

JavaScript

import React from 'react'
import GFG from './GFG'

function App() {
    console.log('hello')
    return (
        <>
            <GFG />
        </>
    );
}

export default App;

Step to run the Application: Open the terminal and type the following command.

npm start

Output:

Example2: In the below code, we will use the above syntax to demonstrate the use of the From prop. In the first example, it was moving from 0 to 180 and in this example, it is in a loop.

GFG.jsx

JavaScript

import { useSpring, animated } from 'react-spring'

function FromProp() {
    const styles = useSpring({
        from: { x: 0 },
        config: { duration: 1000 },
        loop: {
            x: 100,
        },
    })

    return (
        <animated.div
            style={{
                width: 80,
                height: 80,
                backgroundColor: 'lightgreen',
                borderRadius: 100,
                boxShadow: 'rgb(0,0,0,0.44) 0px 5px 5px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                color: 'green',
                margin: 250,
                ...styles
            }} >GFG</animated.div>
    )
}
export default FromProp;

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/spring-ref#the-from-prop

Explore