<div id="root"></div>
body {
	background-color: var(--dark);
	color: var(--light);
	margin: 0;
  padding: 0;
  height: 100vh;
}

.box {
	width: 100px;
	height: 100px;
  border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-weight: 600;
  margin: 10px;
}

.circle {
	width: 100px;
	height: 100px;
  border-radius: 99%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-weight: 600;
  margin: 10px;
}

.App, .container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-height: 100vh;
}
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";

gsap.registerPlugin(useGSAP);

const { useRef } = React;
console.log(React.version);
function App() {
  const container = useRef();
  const circle = useRef();

  useGSAP(
    () => {
      // use selectors...
      gsap.to(".box", { rotation: "+=360", duration: 3 });

      // or refs...
      gsap.to(circle.current, { rotation: "-=360", duration: 3 });
    },
    { scope: container }
  ); // <-- scope for selector text (optional)

  return (
    <div className="App">
      <div ref={container} className="container">
        <div className="box gradient-blue">selector</div>
        <div className="circle gradient-green" ref={circle}>
          Ref
        </div>
      </div>
      <div className="box gradient-blue">selector</div>
    </div>
  );
}

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

External CSS

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

External JavaScript

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