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

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

.app {
  padding: 10px;
}

.box {
  margin: 1rem auto;
}

console.clear();

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

gsap.registerPlugin(useGSAP);

const randomX = gsap.utils.random(-200, 200, 1, true);

function App() {  
  const [endX, setEndX] = useState(0);
  
  const boxRef = useRef();
  const container = useRef();

  useGSAP(() => {
    gsap.to(".box", {
      x: endX,
      duration: 1
    });
  }, { dependencies: [endX], scope: container});
    
  return (
    <div ref={container} className="app">
      <button onClick={() => setEndX(randomX())}>Pass in a randomized value</button>

      <div className="box gradient-blue" ref={boxRef}>{endX}</div>
    </div>
  );
}





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