scrollTrigger prevent scroll until animation finished

[Colette]

Hello, 

I'm pretty new to GSAP and i'm attempting a rather complex animation.  I basically would love to stop the page from scrolling up until a certain animation is finished however its trickier than i thought.  I've tried a few things and i'd just like some advice about the best way to do this.  

Basically I'd like to stop the scroll until after the funcs 

hideSprintTitle(), 

hidePath()
and 

verticalAlignMotion()  have finished...

See the Pen VwOYqYL by Letwah (@Letwah) on CodePen

[mvaneijgen]

Hi @Colette welcome to the forum!

 

Instead of ScrollTrigger, which is build to hook an animation to the scrollbar of the vistor, check out the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/ with it you can watch for scroll events and then do something 

 

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

 

And here an example that blocks scrolling until a certain condition is met and then reinstates the scroll. 

 

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

 

A few notes on your setup, nothing is wrong, but the most powerful tool in GSAP is the timeline. I see you only use single tweens and then use onComplete callbacks to do something else, but if you just add all the tweens to a timeline, this will in theory do the same, but makes in my option easier to read/maintain. It also allow you to use GSDevTools to inspect your animation using this handy tool https://gsap.com/docs/v3/Plugins/GSDevTools/

 

Hope it helps and happy tweening! 

[Colette]

@mvaneijgen

Oh wow - that would have been a much better approach I will look into that 😬 thank you very much for your prompt reply.  Also I had no idea about that inspector plugin, thanks for that.  Back to the drawing board!

[mvaneijgen]

Glad it helped!

 

6 minutes ago, Colette said:

Back to the drawing board!

In theory nothing much has to change you just have to swap out your gsap.to(...) tweens to tl.to(...) and define a timeline at the start of your code block. You can use the position parameter to have tween start at the same time. 

 

Here another example that uses a timeline and labels with the observer plugin, to animate to certain points on the timeline which each visitor scroll input. 

See the Pen GRzrPPy by mvaneijgen (@mvaneijgen) on CodePen

 

Good luck and happy tweening!

[Colette]

Hi @mvaneijgen 

Thanks for these resources - i feel like i'm over complicating mine, and i can't seem to get the scroll to reinitialise at a certain point using  
preventDefault: true.  
can you have more than one observer per script? and should they always be at the bottom? Sorry if these are basic questions - it's the first time i've used it.


its annoyingly long but heres he codepen as is : 

See the Pen QWRbpKa by Letwah (@Letwah) on CodePen

I appreciate any help with this to just get the lower animations s1, s2, s3 to start 😵‍💫

  

[Rodrigo]

Hi,

 

Sorry to hear about the issues but there is too much code in your demo for us to start finding the probable issue(s) in it. The one thing I could see is that in several places you're creating Observer instances, all of them with the default window object as a target, that means that you could have more than one Observer instance active at the same time. I wouldn't recommend that unless it is exactly what you're trying to do.

 

My recommendation would be to start this in a very simple way until you grasp the way of getting this to work the way you intend. Just create a simple Timeline and get to play and reverse it using Observer. Finally an important detail is that at some point (most likely when the animation is complete) you have to disable the Observer instance in order to resume regular scrolling.

 

Based on what I can see, what you're trying to do is closer to this demo, where the Observer instance is enabled immediately and after the slides are done it's disabled and normal scrolling is enabled again:

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

 

Hopefully this helps.

Happy Tweening!

[Colette]

13 hours ago, Rodrigo said:

Hi,

 

Sorry to hear about the issues but there is too much code in your demo for us to start finding the probable issue(s) in it. The one thing I could see is that in several places you're creating Observer instances, all of them with the default window object as a target, that means that you could have more than one Observer instance active at the same time. I wouldn't recommend that unless it is exactly what you're trying to do.

 

My recommendation would be to start this in a very simple way until you grasp the way of getting this to work the way you intend. Just create a simple Timeline and get to play and reverse it using Observer. Finally an important detail is that at some point (most likely when the animation is complete) you have to disable the Observer instance in order to resume regular scrolling.

 

Based on what I can see, what you're trying to do is closer to this demo, where the Observer instance is enabled immediately and after the slides are done it's disabled and normal scrolling is enabled again:

 

 

 

Hopefully this helps.

Happy Tweening!

Hey - thank you so much this has clarified things for me and i was not quite grasping when and where to turn on and off the observer! Its almost perfect now i just have to stop it running again on reverse scroll because currently its preventing the reversed scrollTrigger actions when it's embedded in a page with other content.  Thank you for all your help. Incase you are interested and want to see what i did it's here (sorry same amount of code will make a basic version for reference at some point):

See the Pen RwmPdNq by Letwah (@Letwah) on CodePen

I REALLY appreciate the pointers so thanks very much!