<div id="root" class="panel center"></div>
.app {
  padding: 10px;
}

.box {
 margin: 1rem auto;
}
const { useRef, useState } = React;

function App() {    
  
  const boxRef = useRef();
  const [active, setActive] = useState(true);
  
  const remove = () => {
    gsap.to(boxRef.current, {
      opacity: 0,
      onComplete: () => setActive(false)
    });
  };
  
  return (
    <div className="app">
      <button className="button" onClick={() => active && remove()}>
        {active ? "Remove Box" : "Done"}
      </button>
      { active ? <div className="box" ref={boxRef}>Box</div> : null }
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector("#root"));
View Compiled

External CSS

  1. https://codepen.io/GreenSock/pen/gOWxmWG.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js
  3. https://unpkg.co/gsap@3/dist/gsap.min.js