How to wait for Timeline on ScrollTrigger onLeave?

[Tobias Keller]

Hi!

I have some panels where i snap and animate the inner content.

When the use leaves a panel, there should be also a fade out animation before scrolling to the next panel.

But I can't figure out how to do (and wait) the end animation before scrolling to the next panel.

Can someone help me please?

See the Pen qBXaQyq by tobias-keller (@tobias-keller) on CodePen

[akapowl]

 

Hello and welcome to the forums @Tobias Keller

 

2 hours ago, Tobias Keller said:

When the use leaves a panel, there should be also a fade out animation before scrolling to the next panel.

 

I guess you would have to add a delay to the ScrollTo-tween to make that sort of thing possible.

 

Then again, you would have to make sure, that users wouldn't be able to keep scrolling for the time of the delay or they could eventually trigger another ScrollTo in between; technically you could set the body's overflow to hidden when the function gets called and back to normal in the onComplete callback of the tween - but that would result in a rather uncomfortable user-experience with the scrollbar popping in and out.

 

Then again (I think because the scrolling and execution of JS are handled on different threads by the browser) that would result in portions of the subsequent section showing already, which again isn't quite ideal and not really controlable.

 

Also you would have to find the correct logic for the 'leave'/'enter' animations to begin with, which can become tricky, as you might have to reset things to specific values at some point e.g. - You will also have to make sure to target the correct elements in the first place - in your end_timeline_connection you are actually targetting elements of the #getToKnow section.

 

As you see, there are many factors that would be throwing things off when you try to do ScrollJacking like that - which ScrollTrigger isn't built to do in the first place, as @ZachSaucier mentioned in the thread where this instant snapping technique originated from. That is why he also stated this in mentioned thread:

 

Quote

It should be said that ScrollTrigger is not built to scroll-jack like what this approach does. The approach above is a hack and I don't really recommend using it. If you really need this sort of functionality then you'll need to either build the functionality yourself or use an existing tool like fullpage.js. But even then, depending on your needs, there are likely to be issues because web browsers are simply not built to work in this sort of way. 

by @ZachSaucier

 

 

 

Here is one way, how things could possibly work - but as you will see, they are far from flawless, as this sort of ScrollJacking is not what ScrollTrigger is intended for.

 

See the Pen 728948fedfe871c54937dd3597a3cf89 by akapowl (@akapowl) on CodePen

 

 

 

So you'll probably be better off using a slider that listens to mouse-events (and others) rather than relying on scroll-positions for that sort of thing. @PointC once made an awesome one, but the logic for how to trigger animations in between the sliding would be yours to figure out. Hope all that helps, though  

 

See the Pen MzWzyv by PointC (@PointC) on CodePen