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

.app {
  padding: 10px;
}

.box {
  margin: 10px 0;
}
const { useEffect, useRef, forwardRef } = React;

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

function Container({ children }) {
  return <div><Box>Don't Animate Me</Box></div>;
}

function App() {
  const box1 = useRef();
  const box2 = useRef();
  
  useEffect(() => {
    const boxes = [
      box1.current,
      box2.current,
    ];
    
    // Target the two specific elements we have forwarded refs to
    gsap.to(boxes, {
      x: 100,
      repeat: -1,
      repeatDelay: 1,
      yoyo: true
    });
    
  }, []);
  
  return (
    <div className="app">
      <Box ref={box1}>Box</Box>
      <Container></Container>
      <Box ref={box2}>Box</Box>
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector("#root"));
View Compiled
Run Pen

External CSS

  1. https://codepen.io/GreenSock/pen/gOWxmWG.css

External JavaScript

  1. https://unpkg.co/gsap@3/dist/gsap.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js