carsonarrow

I was able to figure out a solution I'm happy with using css scroll snapping, intersectionObserver and the Observer plugin. Thanks for pointing me in the right direction! ? https://codepen.io/carsonarrow/pen/BaqZrQO

Thanks @Rodrigo! I agree, hijacking the scroll feels very hacky. The Observer plugin looks promising for what I'm trying to achieve though. I still want to pin the section of the page containing the timeline animation until it has been played through. Can I use ScrollTrigger with Observer to do this?

Hello, I’m currently working on a project where I’m trying to create a ScrollTrigger timeline where some parts are scrubbed through and other parts play automatically. Essentially, I want to play certain parts of the timeline automatically, pause at certain places to display text and then have the user scrub for a bit to animate out the text and resume the overall animation. During the sections that play automatically I want to disable scrubbing (which I’m currently doing by changing the body overflow to hidden) so as to prevent the user from triggering the scrubbed parts of the timeline. I have this sort of working but what I’m wondering is: What’s the best way to get this working when scrolling back up the page? I’m using the onStart and onComplete callbacks on certain tweens to disable/enable scrolling but this doesn’t work when the timeline is reversed. Is there a better way to achieve what I’m after than what I’ve come up with in my pen, or am I on the right track with the approach I’ve taken?