React page animation using react-spring

Start by scaffolding a project with the react create app command

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

Then install react spring animation

npm i s react-spring

We will then import the useSpring hook and animated from react-spring

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

We want to animated the header div from 100% to 50% and the logo from 100% to 40%. Thus they will initially take their original size and shrink to half of that.Also with a delay of 1000ms.

In our App function we make use of the hook and difine the following

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

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

To make use of this in our render app we need to pass them as styles to the element and append the elements with animated.

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> );

full code

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;

All done! you can test your functionality b starting the application