React Spring Loop Function

Last Updated : 11 Oct, 2022

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.

The Loop Function is used to control the loop for example if the loop is set to true then the loop will run and if the loop is set to false then the loop will stop.

Syntax:

useSpring({ 
    from: { ... }, 
    to: { ... }, 
    delay: 100, 
    onRest: () => ... 
})

Types of props:

Loop Prop: It is used to define repeat animation.
Inherited props: These props will merge into a copy of the props object it was defined in.
Cancel Prop: This prop is used to cancel the animation.
Default props: It is used to set the default value of certain props defined in the same update.

Steps to create a React Application:

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

Project Structure:

Example 1: In the below code, we will make use of the above syntax to demonstrate the use of the loop function.

GFG.jsx

import React from 'react'; 
import { useSpring, animated } from 'react-spring'
  
/** 
* Define the style for the animation 
* using the useSpring hook 
*/
function LoopTrue() { 
    const styles = useSpring({ 
        loop: true, 
        from: { rotateZ: 0 }, 
        to: { rotateZ: 180 }, 
    }) 
  
    /** 
    * Animated div is the extended version of div that 
    * accepts the properties defined above. 
    */
    return ( 
        <animated.div 
            style={{ 
                width: 80, 
                height: 80, 
                backgroundColor: 'green', 
                borderRadius: 16, 
  
                ...styles, 
            }} 
        /> 
    ) 
} 
  
export default LoopTrue;

App.js

import React from 'react'
import LoopingCard from './LoopingCard'
  
function App() { 
    console.log('hello') 
    return ( 
        <> 
            <LoopingCard /> 
        </> 
    ); 
} 
  
export default App;

index.html

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="utf-8" /> 
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> 
    <meta name="viewport" 
        content="width=device-width, initial-scale=1" /> 
    <meta name="theme-color" content="#000000" /> 
    <meta name="description" 
        content="Web site created using create-react-app" /> 
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> 
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> 
    <title>React App</title> 
</head> 
  
<body> 
    <noscript> 
        You need to enable JavaScript to run this app. 
      </noscript> 
    <center> 
        <h1 style="color: green;">GeeksforGeeks</h1> 
        <h3>A computer science portal for geeks</h3> 
        <h2>React Spring Loop Function</h2> 
        <div id="root"></div> 
    </center> 
</body> 
  
</html>

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

npm start

Output:

Example2: In the below code, we will see how Loop Function works. The above example has set animation in its axis and in the below example we have set the initial and the final value of the loop.

GFG.jsx

import React from 'react'; 
import { useSpring, animated } from 'react-spring'
  
/** 
* Define the style for the animation 
* using the useSpring hook 
*/
function LoopTrue() { 
    const styles = useSpring({ 
        loop: { reverse: true }, 
        from: { x: 0 }, 
        to: { x: 100 }, 
    }) 
  
    /** 
    * Animated div is the extended version of div that 
    * accepts the properties defined above. 
    */
    return ( 
        <animated.div 
            style={{ 
                width: 80, 
                height: 80, 
                backgroundColor: 'green', 
                borderRadius: 16, 
  
                ...styles, 
            }} 
        /> 
    ) 
} 
  
export default LoopTrue;

index.html

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="utf-8" /> 
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> 
    <meta name="viewport" 
        content="width=device-width, initial-scale=1" /> 
    <meta name="theme-color" content="#000000" /> 
    <meta name="description" 
        content="Web site created using create-react-app" /> 
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> 
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> 
    <title>React App</title> 
</head> 
  
<body> 
    <noscript> 
        You need to enable JavaScript to run this app. 
      </noscript> 
    <center> 
        <h1 style="color: green;">GeeksforGeeks</h1> 
        <h3>A computer science portal for geeks</h3> 
        <h2>React Spring Loop Function</h2> 
        <div id="root"></div> 
    </center> 
</body> 
  
</html>

App.js

import React from 'react'
import GFG from './GFG'
  
function App() { 
    console.log('hello') 
    return ( 
        <> 
            <GFG /> 
        </> 
    ); 
} 
  
export default App; 