Jump to content
Search Community

weird behavior on scroll in react (not in codepen)

LoreMaru test
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

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.
  • Create New...