weird behavior on scroll in react (not in codepen)

[LoreMaru]

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

[Rodrigo]

Hi @LoreMaru and welcome to the GreenSock forums!

 

It seems that this could be related to React Strict mode. Please be sure to have the latest version of GSAP in your project and also to use GSAP Context as well:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Here is a basic codepen example that uses ScrollTrigger in a React App:

https://codesandbox.io/s/gsap-scrolltrigger-react-zrp6su

 

Hopefully it will be useful to get a better grasp of how to get started with ScrollTrigger in React.

 

Let us know if you have more questions.

 

Happy Tweening!

[LoreMaru]

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

[Rodrigo]

Hi,

 

Also take a look at this guide:

 

 

Happy Tweening!