Jump to content
Search Community

Slides vertical scroll with pause and resume after the slide-inner content is scrolled to the end

eglaw test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts


got a problem with creating an animation of mine:


i have a vertical slides scrollDown-like tween, that has slides of height: 100vh (fullscreen) that i have to snap to screen as slide, and i have to lock scrolling down the slides, when the current slide (that has snapped on center screen) contains an inner div  (overflow-y: hidden) that has lots of text, and it has to scroll down (mousewheel commanded) to the end of text before releasing the slides scroll. Of course everything is scrubbed if the scroll is reversed to the top.


I have the HEADER + INTRO content which are not slides related content, and the FOOTER that ends the page, that also is not scroll related.


Can it be achieved somehow?

See the Pen XWqgNLE by egorlaw (@egorlaw) on CodePen

Link to comment
Share on other sites

Hi @eglaw and welcome to the GreenSock forums!


First, is this question related to banner adds or a website/webapp? You posted this thread in the banner sub-forum, so let us know in order to either keep it here or move it to the GSAP sub-forum.


Second, the codepen you provide is great, but with that and the description you provide is really hard to help you. Please create a codepen of your own with a minimal example of the issue you're having so we can have a better idea of what the issue could be.


Happy Tweening!!!

Link to comment
Share on other sites

  • Solution

Hey @eglaw,


Sorry this slipped through the cracks.


One alternative could be pin the sections and create a scroll animation for the text content and scrub it using Scroll Trigger, like that you ensure that the users see the entire text before moving onto the next section. It seems the most user friendly and simplest approach, better to look at it in the codepen page, the embedded is to small for the styles I used 😊:

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


Other than that, you'll need to block the scroll, do some sort of instructions to tell the user "scroll all this text to continue" and then re-instate the main scroll in order to keep going.


Hopefully this helps.


Happy Tweening!!!

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...