React Spring is an animation library based on physics. It inherits animated's powerful interpolations and performance, as well as react-motion's ease of use.

What we will create in this tutorial:

In this tutorial, we are going to learn how to use the simplest hook in React Spring which is useSpring . useSpring is the most simple hook but the most used one and all the other hooks are based on this.

Editor

in this tutorial, I will be using codesandbox. CodeSandbox is an online editor for rapid web development. You can of course use any editor you like, it would be the same steps.

#let's start to code. to get started, u need to setup react. so u can run

npx create-react-app nameofapp

or if u are on codesandbox just use React template and let's start. first, we need to add react spring. run :

npm i react-spring

on codesandbox we just add that react-spring Dependencie now create a file called animation.js and copy this code we will explain in a second.

import React, { useState } from "react";
import { useSpring, animated } from "react-spring";

const Translate = () => {
  const [startAnim, setStartAnim] = useState(false);
  const spring = useSpring({
    from: {
      transform: `translate(20px)`
    },
    to: {
      transform: `translate(120px)`
    },
    config: {
      mass: 8
    },
    reverse: startAnim
  });
  return (
    <div style={{ display: "flex" }}>
      <button onClick={() => setStartAnim((prevState) => !prevState)}>
        Translate it
      </button>
      <animated.div
        style={{ ...spring, display: "inline-block", marginLeft: "10px" }}
      >
        im moving weeeee...
      </animated.div>
    </div>
  );
};

export default Translate;

explaining the code

In the first two lines, we added the needed Elements from the dependencies that we have. Then we used useState to toggle the animation with the button. We want the button to reverse the movement of the text. Next, we define our spring using useSpring hook that we got from react-spring. We will give this hook a from property it represents the initial values that we will animate and a to property will represent the end of the animation. The config is optional it basically gives u access to some other properties like the mass in our example. Now the reverse property is what allows you to reverse the animation as the name indicates it's why we set it to startAnim. finally to run the animation u need to inject it in the component u want to animate in our case is the div so we change div to be animate.div and spread sping in the style property of this component.

add the animation to the main component

import React from "react";
import Translate from "./animation";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <Translate />
    </div>
  );
}

and that's it u create ur first simple animation using react spring library ;)

link for the project: https://codesandbox.io/s/inspiring-elgamal-72dmk?file=/src/App.js:0-194