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

[eglaw]

Hello,

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

[Rodrigo]

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

[eglaw]

Oops ... first time here, signed up and bought membership, just few days ago.

Yes im developing a website ... this post is in a wrong place sorry .

[Rodrigo]

No worries, the thread has been moved to the GSAP sub-forum  👍

 

Can you provide a minimal demo that illustrates the issue you're having? Please take a look at this:

Finally thanks for being a club member and supporting GreenSock! 🎉

[eglaw]

workin' on it .. 

here it is

[eglaw]

^ Bump ... any ideas on how can i achieve my goals ?

[Rodrigo]

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