GSAP Split Type animation breaks inside wrapper with fixed height 100vh (React)

[andre1melo]

I'm trying to figure out if this is an issue with GSAP or something I can't understand in CSS.

 

In this React app I'm developing I have a parallax effect "gallery" that forces me (as far as I can tell) to wrap the whole app in a wrapper with a fixed height, overflows and perspective in order to work.

When I set this wrapper to the needed fixed height of 100vh, this seems to break the simple type GSAP animations I have setup further down.

 

I know that if I set it to "min-height" the GSAP then works, but then it breaks the parallax effect.

Here is a minimal demo (without the whole parallax effect mentioned) of it working with the ".wrapper" "min-height" that I cannot use.  Simply remove the "min-" and see how it breaks the GSAP animations.

https://stackblitz.com/edit/stackblitz-starters-q9gfur?file=src%2Fstyle.css

 

Can anyone shed any light as to if this is a GSAP issue?

Or any solution would be highly appreciated of course!

Thank you very much

andre1melo

 

 

 

P.S.- Minimal demo sections props to DesignCourse - Create Modern Text Scroll Animations.

See the Pen style.css by edit (@edit) on CodePen

[GreenSock]

It looks to me like that's because when you set height: 100vh; overflow-y: auto, that's making the .wrapper element become the scroller (the thing that has the scrollbar) rather than the main viewport/body. So ScrollTrigger is watching to see when the viewport's scrollbar hits a certain spot...but you're not scrolling that! You're scrolling the inside of the .wrapper <div>. So you simply need to set that as the "scroller" on the ScrollTriggers so that ScrollTrigger is watching the thing you're actually scrolling. 

 

https://stackblitz.com/edit/stackblitz-starters-dpujgw?file=src%2Fstyle.css,src%2FApp.js

 

Does that clear things up? 

 

Also, you might want to use the new useGSAP() hook - it's a drop-in replacement for useEffect()/useLayoutEffect() and handles various cleanup tasks for you. I'd strongly recommend reading this: 

https://gsap.com/react

[andre1melo]

11 hours ago, GreenSock said:

It looks to me like that's because when you set height: 100vh; overflow-y: auto, that's making the .wrapper element become the scroller (the thing that has the scrollbar) rather than the main viewport/body. So ScrollTrigger is watching to see when the viewport's scrollbar hits a certain spot...but you're not scrolling that! You're scrolling the inside of the .wrapper <div>. So you simply need to set that as the "scroller" on the ScrollTriggers so that ScrollTrigger is watching the thing you're actually scrolling. 

 

https://stackblitz.com/edit/stackblitz-starters-dpujgw?file=src%2Fstyle.css,src%2FApp.js

 

Does that clear things up? 

 

Also, you might want to use the new useGSAP() hook - it's a drop-in replacement for useEffect()/useLayoutEffect() and handles various cleanup tasks for you. I'd strongly recommend reading this: 

https://gsap.com/react

Crystal clear!

Thank you so much. I got everything working on my main App with your tip!

I had a hunch it had to do with useRef when I looked into https://codesandbox.io/p/sandbox/gsap-scroll-trigger-react-with-usegsap-hook-background-cahnge-l8j2df?file=%2Fsrc%2FApp.js. But I was missing the "scroller" on the ScrollTriggers for my particular situation.

Clearly I still need to dive deeper into your documentation.

 

Thanks again!

 

As soon as I can spare some $ (not easy with kids hahaha) I'll get GSAP Premium even if just to support your work and this wonderful tool.

[GreenSock]

9 hours ago, andre1melo said:

As soon as I can spare some $ (not easy with kids hahaha) I'll get GSAP Premium even if just to support your work and this wonderful tool.

Aw, that's so kind of you. We sure appreciate that. 💚 But we don't want you feeling any obligation to do so. I'm happy to hear you're back on track with your project. Good luck!

[andre1melo]

1 hour ago, GreenSock said:

Aw, that's so kind of you. We sure appreciate that. 💚 But we don't want you feeling any obligation to do so. I'm happy to hear you're back on track with your project. Good luck!

Well now I'll really have to do it. This kind of kindness and community sense is priceless.

I'm getting back into Front-End development after a loooong pause, and finding GSAP made me travel back to a joyful time when I was working with Macromedia Flash and ActionScript (like @Carl mentions in his amazing courses).

Thanks again!

[GreenSock]

Wow, you were on board all the way back in the Flash days? Nice! 🙌  Welcome back.

 

Yes, @Carl has been a hero all the way through. He continues to enlighten people via his courses over at https://www.creativecodingclub.com/bundles/creative-coding-club?ref=44f484 (which it sounds like you're aware of). 💚

[andre1melo]

On 1/3/2024 at 2:34 AM, GreenSock said:

Wow, you were on board all the way back in the Flash days? Nice! 🙌  Welcome back.

 

Yes, @Carl has been a hero all the way through. He continues to enlighten people via his courses over at https://www.creativecodingclub.com/bundles/creative-coding-club?ref=44f484 (which it sounds like you're aware of). 💚

Thanks💚, GSAP is really bringing me a familiar feel in these changed times.

 

I'm very aware of @Carl  and his amazing courses over at https://www.creativecodingclub.com/bundles/creative-coding-club?ref=44f484.

So much so, that I'm now in them for life(time)!

 

Which brings me to my question (sorry as it has not much to do with the post).

Do you support Parity Purchasing Power for Club GSAP?

  @Carl  over at Creative Coding Club does, and that swiftly convinced me to get on board.

Now that he's teaching me so much, I'm even more eager to enter the Club GSAP to be able to use all the Plugins on my website, and hopefully after some clients 🤞.

[GreenSock]

6 hours ago, andre1melo said:

Do you support Parity Purchasing Power for Club GSAP?

No, but you're welcome to contact us if you're struggling to afford Club GSAP. We offer student discounts, non-profit ones, etc. We're passionate about having happy customers around here, so don't hesitate to reach out.

 

6 hours ago, andre1melo said:

Now that he's teaching me so much, I'm even more eager to enter the Club GSAP to be able to use all the Plugins on my website, and hopefully after some clients 🤞.

💚

 

Good luck!