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.
Loop Prop: It is a kind of loop in animation that will occur repeatedly like a loop.
Â
Syntax:
useSpring({
from: { ... },
to: { ... },
delay: ...,
onRest: () => ...
})
Steps to create a React Spring App:
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: It will look like the following.
Â
Example1: In the below code, we will use the above variable to demonstrate the use of the above syntax to understand loop prop.
GFG.jsx
Javascript
import React from 'react'; import { useSpring, animated } from 'react-spring'  const LoopingCard = () => {       /**     * Define the style for the animation     * using the useSpring hook     */    const styles = useSpring({         loop: true,         from: { rotateZ: 0 },         to: { rotateZ: 180 },         duration: 2000,     });       /**     * Animated div is the extended version of div that     * accepts the properties defined above.     */    return (<animated.div         style={{             width: 80,             height: 80,             backgroundColor: 'd6d6d6',             borderRadius: 16,             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 LoopingCard; |
App.js
Javascript
import React from 'react'import GFG from './GFG'Â Â function App() { Â Â Â Â console.log('hello') Â Â Â Â return ( Â Â Â Â Â Â Â Â <> Â Â Â Â Â Â Â Â Â Â Â Â <GFG /> Â Â Â Â Â Â Â Â </> Â Â Â Â ); } Â Â export default App; |
To run the Application: Run the following command.
npm start
Output:
Â
Example 2: In the below code, we will use the above variable to demonstrate the use of the above syntax to understand loop prop.
GFG.jsx
Javascript
import React from 'react'; import { useSpring, animated } from 'react-spring'  const LoopingCard = () => {       /**     * Define the style for the animation     * using the useSpring hook     */    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: 'd6d6d6',             borderRadius: 16,             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 LoopingCard; |
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/props#loop-prop
