Jump to content
Search Community

ScrollTrigger to speed up progress of timeline

Maximuslight test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

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.


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

Link to comment
Share on other sites

  • Solution

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! 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...