Block scroll, swap out primary DIV content with secondary DIV content, then allow scroll again

[Mark Howells-Mead]

I'd like to build an element — hopefully using Greensock for the first time — in which a scroll trigger within a screen-filling cover element blocks the page scroll, then swaps out the displayed content to show a different DIV. Once that is on display, then the page can be scrolled as usual. I seem to think that I've seen this kind of scroll override from time to time, but does anyone have an example of where this has been done, or how to achieve it? Thanks so much for helping a newbie out!

[Rodrigo]

Hi @Mark Howells-Mead and welcome to the GreenSock forums!

 

That's something you could achieve with ScrollTrigger and Observer:

See the Pen ExEOeJQ by GreenSock (@GreenSock) on CodePen.

 

Unfortunately we don't have the time resources to build fully working demos for our users, so hopefully that codepen is enough to get you started. If you run into any issues or have any GSAP related question, let us know and remember to include a minimal demo that shows the problem you're having.

 

I recommend you to take a look at the docs for more information:

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

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

 

Finally the collection of ScrollTrigger examples can provide some good starting points for your project:

https://greensock.com/st-demos

 

Happy Tweening!

[Mark Howells-Mead]

Thanks for your feedback on this! I worked out that the easiest way to do this is to handle it in two separate elements.

The first is a 100vh container set to position:absolute and a CSS class on the body to block scrolling. When the user clicks on a button inside this hero element, the element gets hidden by tl.to() and a height of 0, revealing the next page section. The onComplete event then removes the scroll-blocking CSS from the BODY.