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

.app {
  padding: 10px;
}

.box {
  margin: 10px auto;
  will-change: transform;
}

import React, {
  useEffect,
  useLayoutEffect,
  useRef,
  useState
} 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-trial";
import { CustomEase } from "https://esm.sh/gsap-trial/CustomEase";
import { CustomWiggle } from "https://esm.sh/gsap-trial/CustomWiggle";
import { useGSAP } from "https://esm.sh/@gsap/react?deps=react@19.0.0";

gsap.registerPlugin(useGSAP);

console.clear();

gsap.registerPlugin(CustomEase, CustomWiggle);
gsap.config({ trialWarn: false });

CustomWiggle.create("myWiggle", {
  wiggles: 8,
  type: "uniform"
});

gsap.registerEffect({
  name: "pulse",
  effect(targets) {
    return gsap.fromTo(
      targets,
      {
        scale: 1
      },
      {
        scale: 1.5,
        repeat: 1,
        ease: "bounce",
        yoyoEase: "power3"
      }
    );
  }
});

gsap.registerEffect({
  name: "spin",
  effect(targets) {
    return gsap.to(targets, {
      rotation: (i, el) =>
        gsap.utils.snap(360, gsap.getProperty(el, "rotation") + 360)
    });
  }
});

gsap.registerEffect({
  name: "shake",
  effect(targets) {
    return gsap.fromTo(
      targets,
      {
        x: 0
      },
      {
        x: 10,
        ease: "myWiggle"
      }
    );
  }
});

const GsapEffect = ({ children, effect, targetRef, vars, ref }) => {
  const animation = useRef();

  useGSAP(() => {
    if (gsap.effects[effect]) {
      const t = gsap.effects[effect](targetRef.current, vars);
      animation.current = t;
    }
  }, [effect, targetRef, vars]);

  useGSAP(() => {
    // forward the animation instance if a ref is passed
    if (typeof ref === "function") {
      ref(animation.current);
    } else if (ref) {
      ref.current = animation.current;
    }
  }, [ref]);

  return <>{children}</>;
};

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

const wrap = gsap.utils.wrap(["pulse", "spin", "shake"]);

function App() {
  const boxRef = useRef();
  const count = useRef(0);
  const [effect, setEffect] = useState("");

  const toggle = () => {
    setEffect(wrap(count.current++));
  };

  return (
    <div className="app">
      <div>
        <button onClick={toggle}>Toggle</button>
      </div>
      <p>Effect: {effect}</p>
      <GsapEffect targetRef={boxRef} effect={effect}>
        <Box ref={boxRef}>Box</Box>
      </GsapEffect>
    </div>
  );
}

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