<div id="root" class="panel center"></div>

body{
  margin: 0;
  padding: 0;
  height: 100vh;
}

.app {
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.app > * + * {
  margin-top: 1rem
}

import React 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";
const { useEffect, useRef, useState } = React;

gsap.registerPlugin(useGSAP);

console.clear();

function Box({ children }) {
  return <div className="box gradient-blue">{children}</div>;
}

function Circle({ children }) {
  return <div className="circle gradient-green">{children}</div>;
}

function App() {
  const container = useRef();
  // store the timeline in a ref.
  const tl = useRef();
      
  const { contextSafe } = useGSAP(() => {
    // add a box and circle animation to our timeline and play on first render
    console.log("creating timeline");

    tl.current = gsap.timeline()
      .to(".box", {
        rotation: 360
      })
      .to(".circle", {
        x: 100
      });
  }, { scope: container }); // <-- scope for selector text (optional)
  
  
  const toggleTimeline = contextSafe(() => {
     tl.current.reversed(!tl.current.reversed())
  });
   
  return (
    <div className="app" ref={container}>
      <div>
        <button onClick={toggleTimeline}>Toggle</button>
      </div>
      <Box>box</Box>
      <Circle>circle</Circle>
    </div>
  );
}

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