[Combining scrubbed and automatic animation in a timeline]

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

 

See the Pen BaqZrQO by carsonarrow (@carsonarrow) on CodePen

[Combining scrubbed and automatic animation in a timeline]

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?

[Combining scrubbed and automatic animation in a timeline]

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:

1. 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.
2. 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?

See the Pen vYVxBZW by carsonarrow (@carsonarrow) on CodePen