Combining scrubbed and automatic animation in a timeline

[carsonarrow]

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

[Rodrigo]

Hi @carsonarrow and welcome to the GreenSock forums!

 

Maybe you could take a look at the ScrollTrigger/Lottie Helper Function:

https://greensock.com/docs/v3/HelperFunctions#lottie

 

Here is a simple example:

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

 

You could combine that with different ScrollTrigger instances. Hijacking the natural scroll over and over doesn't look like good UX IMHO.

 

Also you could try using the Observer Plugin (included in ScrollTrigger):

https://greensock.com/docs/v3/Plugins/Observer

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.observe()

 

Hopefully this helps.

Happy Tweening!

[carsonarrow]

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?

[GreenSock]

Pinning is a very tricky thing that is entrenched deeply in ScrollTrigger itself - you can't just call a method to make something pin, sorry. Well, of course you could do it manually yourself but I'm just saying that it's not a simple thing in many cases. In its simplest form, though, you could try setting position: fixed at a certain point, make sure the top/left offsets are what they should be to make the element appear pinned, and then when you want to unpin, switch back to position: relative and apply a transform for the distance it was pinned. Observer lets you do much more low-level things but of course that takes more elbow grease to do all the custom functionality rather than relying on ScrollTrigger to handle all the tricky stuff for you. 

 

I wish I had a magic bullet to offer

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

 

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