[weird behavior on scroll in react (not in codepen)]

Thanks! I deleted the Strict mode and now it works fine!
I will still study context to avoid future problems, thanks again

[weird behavior on scroll in react (not in codepen)]

Hi, I'm learning how to use scrolltrigger in react but, for some reason, the code works weird as you can see in the video. If I use the same code on codepen everything works as it should.
I searched for a solution on google and here on the forum but couldn't find anything, please help me to understand

 

import { useEffect } from "react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import "./App.css";
gsap.registerPlugin(ScrollTrigger);

function App() {
  useEffect(() => {
    const tl = gsap.timeline({
      scrollTrigger: {
        markers: true,
        trigger: ".space2",
        start: "top center",
        scrub: 2,
        toggleActions: "restart none none none",
        pin: ".box",
      },
    });
    tl.to(".box", {
      x: 1000,
      duration: 8,
    });
  }, []);

  return (
    <div className="App">
      <div class="space1"></div>
      <div class="wrap">
        <div class="box"></div>
      </div>
      <div class="space2"></div>
    </div>
  );
}

 

See the Pen bGKqvmG by loremaru (@loremaru) on CodePen