ScrollTrigger to speed up progress of timeline

[Maximuslight]

Hi Everyone, 

 

thanks for being great community,

 

I would like to ask if it's possible to have ScrollTrigger alternate the progress of an already playing timeline?

 

For example:

1. Timeline have 30 boxes rested in the container and inner, container only visible 3 boxes at the time. (container has max-height and overflow:hidden).

2. Inner is animated by timeline using  (fromTo) with negative Y axis going back to 0.

3. On mouseover, (container is mouseovered) pause the timeline.

4. (the struggle) now that mouse is in the container and timeline paused user can use their mouse wheel to progess back and forth.

 

Questions:
1. Is it possible for gsap?

2. Perhaps it's not a job for scrolltrigger since container itself have no scrollbar (I would prefer not to have scrollbar).

 

I'll prepare simplified codepen that illustrates the problem.

 

Thank you!

 

 

See the Pen gOdrovG by maximuslight (@maximuslight) on CodePen

[mvaneijgen]

Yeah, if the page doesn't have a scrollbar it isn't a job for ScrollTrigger.

 

Have you seen the Observer plugin with it you can watch for certain events (so you can watch for scroll) and fire certain logic (eg update the progress of your timeline), this seems like the perfect fit for your use case. 

 

I see a fade in your timeline, I would suggest building two timelines, one with the fade and the other that is infinitely moving and make it so that the Observer plugin is updating the progress of that timeline. Hope it helps and happy tweening! 

[Maximuslight]

Hi mvaneijgen, 

 

thank you for your insights, the Obeserver Plugin looks great! thank you for pointing me into it's direction.

Edit: Implemented the observer, works like a charm! Edited codepen in case someone seeking same answer.

 

Thanks!

Edited February 22, 2023 by Maximuslight