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, time durations, all of which 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 the browsers.
Installation: To install this library in your project you can use the following command from the root directory of your application:
npm install react-spring
Sample Application: To see how simple it is to perform animation using this library, let’s create a small project. We will be creating this simple animation using the react spring library.
-
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
We will be creating a component LoopingCard which rotates on its z-axis. The App.jsx is the main component that uses the LoopingCard component.
Project Structure: It will look like the following.
Project Structure.
Example: The way react spring is used is very simple. I have used the useSpring hook that takes an object reflecting how the animation should unfold. To apply these props we have to use the extended versions of elements defined in the animated module. Just setting the style attribute to the prop returned by useSpring will animate the element.
LoopingCard.jsx
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: 360}, 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; |
Use the LoopingCard component in the App.jsx file and run the application using the following command.
App.js
import React from 'react'import LoopingCard from './LoopingCard' function App() { console.log('hello') return ( <> <LoopingCard /> </> ); } export default App; |
To run the Application: Run the following command.
npm start
Output:
