ScrollTrigger horizontal animation stop tween

[Popique]

Hello guys,

 

After seeing some GSAP sites and what it can achieve, i’ve decided that it’s time to add more interaction on websites and level up my animation process.

 

So… i’ve joined the GSAP “club”!

 

I’ve started by watching some tutorials, read some forum posts and some documentation. BTW: great community!

 

With a little effort i’ve managed to create my desired animations,  but unfortunately i can’t figure this one out :(.

 

My intention is:

- scroll vertical until section 2 ends and then stop the user scrolling

- a button should appear and notice him that this section is finished.

- when he clicks the button / scroll down he will be moved (snapped) to the next section. (so he will be aware that he will go to a new section and won’t scroll fast through website skipping this detail).

- when he scrolls down another time on section 3, again a button should be shown and after next scroll to snap to the next section.

 

Codepen:

 

So what i am trying to achieve is basically an intercept on  tween ends, stop the scroll, notice the user that the section is down, and after the animation is done, the user can scroll again and he will be snapped to next section.

 

 

Thanks in advance!

 

See the Pen PoWyxgK by mvp0409 (@mvp0409) on CodePen

[GreenSock]

Welcome to the community, @Popique! 

 

From a user's perspective, this sounds like a really annoying experience unless I'm misunderstanding something. So I'd arrive on the page and see the scrollbar which indicates I have a long way to scroll, but after I go a certain distance it suddenly stops me from scrolling and makes the scrollbar disappear? Then I have to click a button to get the scrollbar back and continue? Am I understanding that correctly? 

 

And what happens when I scroll back up? I can go as far as I want? But then on the way back down I keep getting stopped? 

 

What happens if the user clicks way down on the scroll position to make it jump there? It would only let it move a certain distance and make the scrollbar disappear until I click? 

[Popique]

Hi Jack,

 

I will try to reformulate. So i have 2 horizontal panels and then one vertical panel. I would like if possible after the scroll on horizontal panel ends, to trigger an animation so the second panel of horizontal displays a "next button". After this animation is finished, i would like after the next scroll to snap to the next vertical panel / or when the user clicks the button.

 

On reverse, it can skips this, and just reverse the page normal. 

 

Then I have to click a button to get the scrollbar back and continue? Am I understanding that correctly? : Click a button or continue scrolling.

 

 

And what happens when I scroll back up? I can go as far as I want? But then on the way back down I keep getting stopped?  Just the first time i think, it or it can repeat again.

 

Regarding the scrollbar, it can just show that there are 2 sections, and then it will increase it's length.

 

So what I want is after the horizontal panel ends to trigger an animation and make sure that the user see that animation, and doesn't skip forward it with a super fast scroll. 

 

I have updated my codepen to have 2 horizontal sections and one vertical.

 

Thank you!

[GreenSock]

Pretty much anything is possible with enough work, sure. This is a highly unusual request and it's not really the type of thing we can "build-to-order" in these free forums for you. If you still need some help, it may be best to post in the "Jobs & Freelance" forum and hire an expert. Or you can contact us if you'd like to book time for paid consulting services.

 

(Side note: as a user, the experience you described would really frustrate/confuse me, but maybe I'm weird)

[Popique]

Hi,

 

I've managed to do it.

On the ScrollTrigger for horizontal sections, i am checking the progress with onUpdate, and if it's at a certain point i am showing the button animation and on more scroll (bigger progress) i snap to next section.

 

 

Thank you!