GreenSock is an awesome animation library. I will say hello to GreenSock with the react app.

1. Create a brand new react app with

npx create-react-app greensock
cd greensock
npm install gsap
code .
npm start

2. Create components folder in src and inside it create animation.js

3. Open /components/animation.js and create Greensock component

• First import React and TweenMax
• Define TweenMax when component mount.
• TweenMax have from() method, which is basically it starting style.
• TweenMax have to() method, which is declare its end state.

After Implementing these steps in animation.js, it will be –

import React from "react";
import TweenMax from "gsap/TweenMax";

class GreensockAnimation extends React.Component {
	componentDidMount(){
		TweenMax.from(".greensock-animation", 1, {x:-100, opacity: 0, height: 0});
		TweenMax.to(".greensock-animation", 3, {x:0, opacity: 1, height: 50});
	}
	render(){
		return (
			<div className="greensock-animation">
				<p>GreensockAnimation</p>
			</div>
		)
	}
}
export default GreensockAnimation;

4. Open /App.js.
a. Import GreensockAnimation from ./components/animations
b. Use GreensockAnimation component before the header
Final look of my App.js is –

import React from 'react';
import logo from './logo.svg';
import './App.css';
import GreensockAnimation from "./components/animation";


function App() {
  return (
    <div className="App">
      <GreensockAnimation />
      <header className="App-header">
        <img 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>
    </div>
  );
}

export default App;

The demo looks like a simple handshake with the GreenSock animation library.