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