Ξεκινήστε σκαλώνοντας ένα έργο με την εντολή react create app

npx create-react-app spring-animation
ce spring-animation

Στη συνέχεια, εγκαταστήστε το animation react Spring

npm i s react-spring

Στη συνέχεια θα εισάγουμε το useSpring hook και το animated από το react-spring

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

Θέλουμε να κινούμε το div κεφαλίδας από 100% σε 50% και το λογότυπο από 100% σε 40%. Έτσι θα πάρουν αρχικά το αρχικό τους μέγεθος και θα συρρικνωθούν στο μισό αυτού. Επίσης με καθυστέρηση 1000ms.

Στη λειτουργία της εφαρμογής μας χρησιμοποιούμε το άγκιστρο και ορίζουμε τα ακόλουθα

const contentWrapper = useSpring({
    delay: 1000,
    from: { width: "100%" },
    to: { width: "50%" },
  });

const logoWrapper = useSpring({
  delay: 1000,
  from: { width: "100%" },
  to: { width: "40%" },
});

Για να το χρησιμοποιήσουμε αυτό στην εφαρμογή render, πρέπει να τα περάσουμε ως στυλ στο στοιχείο και να προσθέσουμε τα στοιχεία με κινούμενα.

return (
    <div>
      <animated.div className="App" style={contentWrapper}>
        <header className="App-header">
          <animated.img
            style={logoWrapper}
            src={logo}
            className="App-logo"
            alt="logo"
          />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </animated.div>
    </div>
  );

πλήρης κωδικός

import React from "react";
import PropTypes from "prop-types";
import { useSpring, animated } from "react-spring";
import logo from "./logo.svg";
import "./App.css";

const App = () => {
  const contentWrapper = useSpring({
    delay: 1000,
    from: { width: "100%" },
    to: { width: "50%" },
  });
  const logoWrapper = useSpring({
    delay: 1000,
    from: { width: "100%" },
    to: { width: "40%" },
  });
  console.log(contentWrapper);
  return (
    <div>
      <animated.div className="App" style={contentWrapper}>
        <header className="App-header">
          <animated.img
            style={logoWrapper}
            src={logo}
            className="App-logo"
            alt="logo"
          />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </animated.div>
    </div>
  );
};

export default App;

Ολα τελείωσαν! μπορείτε να δοκιμάσετε τη λειτουργικότητά σας β ξεκινώντας την εφαρμογή