Scroll trigger landing page animation with React

[Deewens]

Hello,

 

I am trying to use GSAP (which is really great) for my React App. But I can't figure out what I am doing wrong.

I would like something like this :

https://gyazo.com/faf842677cbc0c9830f3050732144903

 

When I am refreshing the page without coming from the top (and without scrolling), the animation seems to work:

https://gyazo.com/92abad5f15b65134da72b6c6a4d4c684

 

But, I am getting something like that when I am scrolling from the top :

https://gyazo.com/7de4c15cdbf52cda50f51cbbcf8b4cea

 

I can't find what I am doing wrong, and I read a lot of tutorial.

 

Here is my code (btw I am using Material-UI and Typescript, and Typescript is not happy when I give an useRef element.current to gsap target) :

Codesandbox : https://codesandbox.io/s/scrolltrigger-issue-with-react-sj99k

 

Thanks ! I hope I will find a solution and someone can help me, this library seems really awesome !

(I can't paste a codepen, because my project is separated in multiple component, but I can rewrite the part with GSAP just for this subject if you need it !)

[ZachSaucier]

Hey Deewens and welcome to the GreenSock forums.

 

A few notes:

• You don't need to import TimelineLite.
• You're making one of the most common ScrollTrigger mistakes: applying ScrollTriggers to tweens inside of a timeline. That doesn't make much sense because both the timeline and the ScrollTrigger will try to control the values.
• I would probably create this sort of thing using ScrollTrigger's .batch() functionality. Unless you wanted all of the cards in a section to be animated in at the same time even if some are still offscreen, in which case using a ScrollTrigger on the container and using a tween with a stagger probably makes more sense.
• It's more efficient to use .from() instead of .fromTo() whenever you can (it looks like you can in this case).

As for your issue, it seems like a logical issue but it's hard to tell where solely based on the code. Can you please create a minimal demo with everything unrelated stripped out using something like CodePen or CodeSandbox for us to take a look at?

[Deewens]

I could not put in on codepen (the import does not work for react, material ui etc and it's weird with Typescript) so I put it on CodeSandbox. I hope it'll be right.

 

https://codesandbox.io/s/scrolltrigger-issue-with-react-sj99k

 

Thanks for your message !

[ZachSaucier]

Fixing the most common ScrollTrigger mistake of applying a ScrollTrigger to tweens inside of a timeline that I mentioned in my last post seems to fix the issue for me. 

[Deewens]

I am not sure to understand how to solve this "most common ScrollTrigger mistake". I have to put all the ScrollTrigger object directly in gsap.timeline as :

foreach {
 gsap.timeline({scrollTriger: {
   blabla
 }.from(element, {blabla})
               
}
               
              

Right?

 

Anyway, I tried to use the "batch" function : 

  useEffect(() => {
    ScrollTrigger.batch(newsCardRefs.current, {
      interval: 1,
      onEnter: (batch: Element[]) => gsap.from(batch, { opacity: 0, y: 75 })
    });
  }, []);

But again, it's not working. I don't know if it is because React ref or something else. I updated the code sandbox accordignly. And I followed this tutorial : https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch()

[ZachSaucier]

18 minutes ago, Deewens said:

I have to put all the ScrollTrigger object directly in gsap.timeline as :

foreach {
 gsap.timeline({scrollTriger: {
   blabla
 }.from(element, {blabla})
               
}
               
              

Right?

That's one way of doing it. Another is to not use a timeline at all - just use regular tweens with ScrollTriggers.

 

19 minutes ago, Deewens said:

it's not working

It seems to be working for me. I think you may be misunderstanding how .batch() works. The onEnter won't run until the ScrollTrigger for that element is entered. So using a .from() inside of it doesn't make much sense. If you're going to use .batch(), I would recommend using a .set() to set the initial state and then using a .to() tween inside of the onEnter callback.

 

18 minutes ago, Deewens said:

I updated the code sandbox accordignly.

Please fork demos when creating new versions for these forums so that context isn't lost for future readers. Thanks!

[Deewens]

Ok, I understand now ! Many thanks ! It is working as excepted now.

 

Sorry, I forked the sandebox with the solution : https://codesandbox.io/s/scrolltrigger-issue-with-react-solved-7sjt0?file=/src/NewsSection.tsx

 

I will edit my first message with the first code of the issue when I can !