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

.box {
 margin: 1rem auto;
}
import React, {
  useRef,
  useState,
  useLayoutEffect,
  useEffect
} from "https://esm.sh/react@18.3.1";
import ReactDOM from "https://esm.sh/react-dom@18.3.1";
import gsap from "https://esm.sh/gsap";
import { useGSAP } from "https://esm.sh/@gsap/react?deps=react@18.3.1";

console.clear();

function App() {
  const container = useRef();
  const [active, setActive] = useState(true);

  const { contextSafe } = useGSAP({ scope: container });

  const remove = contextSafe(() => {
    gsap.to(".box", {
      opacity: 0,
      onComplete: () => setActive(false)
    });
  });

  return (
    <div className="app" ref={container}>
      <button className="button" onClick={() => active && remove()}>
        {active ? "Remove Box" : "Done"}
      </button>
      {active ? <div className="box gradient-blue">Box</div> : null}
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
View Compiled

External CSS

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

External JavaScript

  1. https://codepen.io/GreenSock/pen/NWoLXRG.js