<div id="root" class="panel"></div>
body{
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
}

.app {
  padding: 10px;
  display: flex;
  align-items: center;
  height: 100vh;
  justify-content: space-around;
}

.box {
  margin: 30px 0;
  padding: 10px;
}
import React from "https://esm.sh/react@18.3.1";
import ReactDOM from "https://esm.sh/react-dom@18.3.1";

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

const { useRef } = React;

const Box = ({ children, className, anim }) => {
  return (
    <div className={"box " + className} data-animate={anim}>
      {children}
    </div>
  );
};

function App() {
  const container = useRef();

  useGSAP(() => {
    // Target the two specific elements we have asigned the animate class
    gsap.to("[data-animate='rotate']", {
      rotation: 360,
      repeat: -1,
      repeatDelay: 1,
      yoyo: true
    });

    gsap.to("[data-animate='move']", {
      x: 50,
      repeat: -1,
      repeatDelay: 1,
      yoyo: true
    });

   }, {scope: container}); // <-- scope for selector text (optional)

  return (
    <div className="app" ref={container}>
      <Box anim="rotate" className="gradient-blue">Box</Box>
      <Box className="dont-animate gradient-red">Don't Animate</Box>
      <Box anim="move" className="gradient-blue">Box</Box>
    </div>
  );
}

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

External CSS

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

External JavaScript

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