<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@19.0.0";
import ReactDOM from "https://esm.sh/react-dom@19.0.0/client";
import gsap from "https://esm.sh/gsap";
import { useGSAP } from "https://esm.sh/@gsap/react?deps=react@19.0.0";

gsap.registerPlugin(useGSAP);

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