Scroll Trigger does not seem to work on elements with hidden overflow

[Charlène Bonnardeaux]

Hello everyone!
I've been trying to create a kind of paralax for a while but I'm still stuck on one thing: I can't trigger the scroll triger when the container has its overflow hidden: why?

Quick little demo attached,

thanks for any help

See the Pen dymbKWj by charlene-bx (@charlene-bx) on CodePen

[akapowl]

 

Hello Charlène,

 

since you are setting the overflow to hidden on the body, you are basically disabling any scroll - but ScrollTrigger, as the name says, is built to work with scroll. Also you do have a height of 100vh and overflow: hidden on that viewer ref which basically makes this container unscrollable too, so it doesn't really make sense to use it as the scroller, I think.

 

If you want to use ScrollTrigger you will have to make sure to have some scrollable space to begin with - and if all you wanted to achieve by setting the overflow to hidden on the body, was to make sure there are no scrollbars visible, have a look at this post, it might help with that.
 

 

See the Pen GRxKGzK by akapowl (@akapowl) on CodePen

 

 

 

Maybe I'm just not seeing the bigger picture here, though, and actually the overflow: hidden is exactly what you want, because you want to do some sort of scroll-jacking - but then you might have to listen to the different available events related to scrolling, like mousewheel, touch etc. instead, because there won't be native scrolling available, which ScrollTrigger needs for it to work.

 

In that case, the Observer Plugin might be what you'd want to have a look at.

 

https://greensock.com/docs/v3/Plugins/Observer

 

But again, I'm not sure I really understand what exactly you are going for. Nonetheless, I hope this helps a bit.

 

And thank you for supporting GreenSock by being a club member!