<div id="root"></div>

* {
 box-sizing: border-box 
}

html, 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;
	color: var(--dark);
  padding: 10px;
}

.circle {
	width: 100px;
	height: 100px;
  border-radius: 99%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-weight: 600;
	color: var(--dark);
  padding: 10px;
}

.nested {
  border: solid 2px var(--light);
  border-radius: 8px;
  padding: 2rem;
  height: 350px;
  display: flex;
  flex-direction: column;
	justify-content: space-around;  
}

.App {
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-height: 100vh;
}

import React from "https://esm.sh/react";
import ReactDOM from "https://esm.sh/react-dom";

import gsap from "https://esm.sh/gsap@3.12.3";
import { useGSAP } from "https://esm.sh/@gsap/react?deps=react@18.3.1";

const { useRef } = React;

const Nested = () => {
  return (
    <div className="nested">
      <div className="box gradient-green">'Leaking' scope</div>
      <div className="circle gradient-blue">No 'leaking'</div>
    </div>
  );
};

function App() {
  const container = useRef();
  const circle = useRef();
  
  useGSAP(() => {
    gsap.to(".box", { 
        rotation: "+=360", 
        duration: 3, 
        repeat: -1,
        ease: 'none'
     });
      
      gsap.to(circle.current, { 
        rotation: "+=360", 
        duration: 3, 
        repeat: -1,
        ease: 'none'
      });
   
  }, {scope: container});

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

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