리액트 GSAP 애니메이션

Part1.

App.css

.App-logo {
  height: 40vmin;
  pointer-events: none;
  opacity: 0;
}

p {
  opacity: 0;
}

App.js

import {TweenMax, Power3} from 'gsap';
import './App.css';

function App() {
  let logoItem = useRef(null);
  let textItem = useRef(null);

  useEffect(() => {
    TweenMax.to(logoItem, .8, {opacity: 1, y:-20, ease: Power3.easeOut, });
    TweenMax.to(textItem, .8, {opacity: 1, y:-20, delay:.2, ease: Power3.easeOut, });
  },[]);

  return (
    <div className="App">
      <header className="App-header">
        <img
                    ref={item => {logoItem = item}}
                    src={logo}
                    className="App-logo"
                    alt="logo"
                    />
        <p ref={item => {textItem = item}}>
          Edit <code>src/App.js</code> and save to reload.
        </p>
      </header>
    </div>
  );
}

Part2.

App.css

.circle {
  width: 75px;
  height: 75px;
  border-radius: 100%;
  background-color: #FDCF51;
  margin: 50px;
}

.circle.red {
  background-color: #FD5151
}

.circle.blue {
  background-color: #51A0FD;
}

App.js

import React, {useEffect, useRef, useState} from 'react';
import {TweenMax, Power3} from 'gsap';
import './App.css';

function App() {
  let app = useRef(null);
  let circle = useRef(null);
  let circleRed = useRef(null);
  let circleBlue = useRef(null);

  const [circleState, setCircleState] = useState(false)

  const handleClick = () => {
    TweenMax.to(circleRed, .8, {width: 200, height: 200,  ease: Power3.easeInOut})
    setCircleState(true);
  }

  const handleClickRevert = () => {
    TweenMax.to(circleRed, .8, {width: 75, height: 75,  ease: Power3.easeInOut})
    setCircleState(false);
  }

  useEffect(() => {
    TweenMax.to(app, 0, {css:{visibility: 'visible'}})
    // TweenMax.from(circle, .8, {opacity: 0, ease: Power3.easeInOut, x: 40})
    // TweenMax.from(circleRed, .8, {opacity: 0, ease: Power3.easeInOut, x: 40, delay: .2})
    // TweenMax.from(circleBlue, .8, {opacity: 0, ease: Power3.easeInOut, x: 40, delay: .4})

    TweenMax.staggerFrom([circle, circleRed, circleBlue ], .8, {opacity: 0, ease: Power3.easeOut, x: 40}, .2 )
  },[]);

  return (
    <div
    ref={el => {app = el}}
    className="App">
      <header className="App-header">
        <div className="circle-container">
          <div
          ref={el => {circle = el}}
          className="circle"></div>
          <div
          ref={el => {circleRed = el}}
          onClick={circleState !== true ? handleClick : handleClickRevert}
          className="circle red"></div>
          <div
          ref={el => {circleBlue = el}}
          className="circle blue"></div>
        </div>
      </header>
    </div>
  );
}

export default App;

참조링크