REACT - Try to break a parent scrolltrigger since a child component 🚀

[Mika Otter]

Hi there,
I'm discovering GSAP and really like it... Until I try GSAP with React 😆
Nop, just many new things for a newbie like me so I request your help for one first thing...

=> In a project with differents components called in my main App function, can I remove temporarily this trigger from a child component 👇

I try since one week to make this overlay work with a horizontal scroll that is in another component, but nothing works, the overlay always takes over.

{Project
      -->main (with the overlay above)
      -->component (who want to break temporarily the overlay 😭)
}

 

Thx for your help and this great tool  that I already love but that doesn't love me yet o//

 

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

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

 

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

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

[GreenSock]

Yeah, without a minimal demo it's pretty tough to help you. Here's a starter template you can fork: 

https://stackblitz.com/edit/react-cxv92j

 

I did notice on problem for sure - you were creating a gsap.timeline() OUTSIDE of your useGSAP() which is generally a bad idea because anything created inside the useGSAP() automatically gets cleaned up for you. React double-invokes hooks in strict mode, so cleanup is pretty important. And I wasn't sure why you were making that tl variable a dependency in your hook. 

 

Also, don't forget to register the plugins: 

gsap.registerPlugin(useGSAP, ScrollTrigger);

If you still need help, just post a super simple minimal demo here that illustrates the problem and we'd be happy to take a peek. 

[Mika Otter]

Ok, sorry after to try fork your link and fail, I tried to make my own project on stackblitz but it doesn't work... It's work on my computer but not on Stackblitz. I'm quite confuse and rather new on all these things so please excuse my blunders. 😅

I made for you a repository on github here :
https://github.com/Mika-Otter/GSAP-Helper

(vite:  npm run dev)
I've tried without tl and sometimes it don't work... With the tl it work all the time.


Thx a lot if you can have a look.. 🫠

[GreenSock]

I noticed quite a few problems: 

1. You were trying to select the elements before the component rendered which means there will be no results:

   let sections = document.querySelectorAll(".overlaySection");

   You need to select stuff inside the useGSAP() hook because that's called after the component renders. This is all just React stuff, unrelated to GSAP. 

2. There was no reason to even create a timeline or tl variable. 
3. You were referencing window.width and window.height which aren't things. I think you meant window.innerWidth and window.innerHeight
4. You didn't define an "end" for your ScrollTriggers. I think you wanted "max"
5. You were trying to pin an element that's INSIDE of a pinned element which you cannot do. The way you set things up makes it very tricky. The child component actually needs to pin the parent element and since React renders in reverse order (children first), it isn't even available to define as the pin, thus you'll need to find a different way to pass that data up the chain and create the ScrollTrigger when the parent renders.
6. You were creating ScrollTriggers in the wrong order and you didn't set a refreshPriority. It's very important that things get refreshed in the order that they appear on the page because pinned elements further up on the page can push things further down the page, affecting the start/end values of ones below. 
7. You don't need to pin the final element.
8. You didn't have position: relative set, so the browser won't render the final element in front of the others that were translated. This is a CSS thing, unrelated to GSAP. 

Much of this stuff is purely about React (and I'm no React expert), but I created a pull request for you with some changes that'll hopefully get you on your way. Normally we don't do this kind of thing (it's a lot of custom logic and fixes), but I wanted to help and I had a little time:

 

https://github.com/Mika-Otter/GSAP-Helper/pull/1

[Mika Otter]

Thank you a loooot... it really helped me for continue my project ! I've more understood many things.

I'm really sorry for the inconvenience of my mistakes in React. Like you maybe feel it, I'm still learning React in the same time. 😅

I note the fact that this is an exceptionnaly help and if I have some other questions I will make a Pen Demo with less problems to solve.
 

For resume this topic, if I want to continue with again a "vertical pin section overlay" after the horizontal scroll, a possible solution can be just needed to create a new scrolltrigger for that ?
 

Thx again !
I'm waiting until I've mastered the free part of gsap and then I'll move on to prenium for sure ⭐

[Rodrigo]

2 hours ago, Mika Otter said:

if I want to continue with again a "vertical pin section overlay" after the horizontal scroll, a possible solution can be just needed to create a new scrolltrigger for that ?

Hi,

 

Yeah you should definitely use another scrolltrigger instance in order to pin another section.

 

Happy Tweening!

[Mika Otter]

Thank you to all of you and maybe see you next time !

Have a nice day 🚀