Jump to content


weird behavior on scroll in react (not in codepen)

Moderator Tag
Go to solution Solved by Rodrigo,

Recommended Posts

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";

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 class="space2"></div>


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

Link to comment
Share on other sites

  • Solution

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:



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



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!

Link to comment
Share on other sites

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

Link to comment
Share on other sites



Also take a look at this guide:



Happy Tweening!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.