Why doesn't ScrollTrigger work?

[DowneyChow]

Hello,guys! I am a designer and front-end green hands, learning Gsap and implementing some mouse-scrolling web animations in ReactJS.

But it doesn't work when I use it. I hope to get your help. Thank you very much.

 

I expect something similar to this example

 

 

import "./styles.css";
import { useRef, useEffect } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

export default function App() {
  const containerRef = useRef();
  const pageRef = useRef();
  const Container = document.querySelectorAll(".container");
  console.log(Container);

  const Page = document.querySelectorAll(".page");
  console.log(Page);

  useEffect(() => {
    gsap.to(
      Page,
      {
        xPercent: -100 * (Page.length - 1),
        ease: "none",
        scrollTrigger: {
          trigger: ".container",
          pin: true,
          markers: true,
          end: () => "+=" + Container.offsetWidth
        }
      },
      []
    );
  });

  return (
    <div ref={containerRef} id="container" className="container">
      <div className="page" id="red" ref={pageRef}></div>
      <div className="page" id="green" ref={pageRef}></div>
      <div className="page" id="blue" ref={pageRef}></div>
      <div className="page" id="yellow" ref={pageRef}></div>
      <div className="page" id="pink" ref={pageRef}></div>
    </div>
  );
}

.App {
  font-family: sans-serif;
  text-align: center;
}
.page {
  width: 100vw;
  height: 100vh;
}

#red {
  background-color: rgb(202, 62, 62);
}

#green {
  background-color: green;
}

#yellow {
  background-color: yellow;
}

#blue {
  background-color: blue;
}

#pink {
  background-color: pink;
}

.container {
  display: flex;
  flex-shrink: 0;
  width: 500vw;
  flex-wrap: nowrap;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

 

See the Pen xxYpEOo by GreenSock (@GreenSock) on CodePen

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[DowneyChow]

1 hour ago, GSAP Helper said:

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Thank you！

This is the minimal demo  in CodeSandbox.

[GreenSock]

I noticed the following problems: 

• You were using one "Sections" ref for a bunch of elements (that's not valid in React)
• You didn't pass an empty dependency Array to the useEffect(), so it'll get called on every render (another React issue)
• You were trying to get sections before they even existed (put your querySelector inside the useEffect() so that it gets called after React renders)
• The way you're using class selectors is considered very poor practice in React. Make sure you scope your selectors - gsap.context() is fantastic for this. 
• I'd strongly recommend using gsap.context() for easy cleanup too. It's your best friend in React.

Please read the React article here: 

 

 

I assume this is what you wanted?

https://codesandbox.io/s/exciting-turing-fuhv9l

[alpknx]

Hello,guys!  I' m new in using GSAP, but code inside useEffect from https://codesandbox.io/s/exciting-turing-fuhv9l  not running on my example locally, I hope to get your help.

 

[Rodrigo]

Hi @alpknx and welcome to the GreenSock forums!

 

Sorry to hear about the troubles. Make sure to use GSAP Context in your React setup. Also check that you're importing both the GSAP core and ScrollTrigger and that you are registering the plugins as well.

 

Be sure to take a look at how to properly install and use GSAP with ES Modules:

https://greensock.com/docs/v3/Installation#modules

 

Here are a collection of starter templates for using GSAP in React and Next:

https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters

https://stackblitz.com/@GreenSockLearning/collections/gsap-nextjs-starters

 

Feel free to fork any of those and adapt it to your current scenario.

 

Happy Tweening!

[alpknx]

Thank you, @Rodrigo for your help,  I really appreciate it. I have few questions about scrolltrigger, so why when I set markers in scrollTrigger parameters, then second vertical scroll shows up,  and only when I control it manually animation happened? But on the other hand when markers = false, then nothing gonna happen, I litterally copied the https://stackblitz.com/edit/react-cxv92j?file=src%2FApp.js, locally it like seems code in useLayoutEffect is not working, but effect is called 

[alpknx]

@Rodrigo, Fortunately, I figured out what's happened in my case. The answer is simple, in the main file of my proejct in styles were property overflow-x:hidden, I fixed it to visible, and the animation started working. Thank you for your starter templates for using GSAP in React and other advices.

[Rodrigo]

Hi,

 

Glad to hear that you were able to solve it and find the cause of your issue 

 

40 minutes ago, alpknx said:

Thank you for your starter templates for using GSAP in React and other advices.

You're more than welcome and thanks for your kind words! If you have any other question let us know.

 

Happy Tweening!