Jump to content
Search Community

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

Mark Howells-Mead test
Moderator Tag

Go to solution Solved by Mark Howells-Mead,

Recommended Posts

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!

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...
  • Solution

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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...