playgroundxyz

Maybe you could help me with what I am trying to achieve. I am making a banner template that can have a dynamic number of elements and responds to scroll. I have a couple of setting sliders, one of them is the staggerOverlap which I have intended to be so that if it is zero then there is no stagger overlap, so if the stagger is x then the stagger is also x, that means that ther is no overlap with the staggering tweens, one starts when another ends. If the overlap is 100% then lets say duration is x then the stagger is zero, which means everything animates together over the whole duration. And any percentage in between those extremes, 0-100. I also have a slider with which you can control the start and end of the whole stagger timeline in the whole scroll duration. I can't put anything working on Codepen as we have a scroll variable and some other things that come from the format, that have been implemented behind the scenes and that doesn't work outside out format. I have been trying to come up with logic how to make it so that I adjust the overlap percentage and it fills up the set duration. Lets say that the start point is at 10 scroll position and end at 45 for example. So duration 35. And I have lets say 8 images staggering. Could anyone maybe help me with the logic of dividing this duration over 35 units of scroll between the 8 images based on an overlap percentage? Might be a big ask, I just have had a hard time wrapping my head around this today and I thought I'd ask. Thanks a bunch either way!

Yes! Thank you. Perfect. Makes complete sense. Really appreciate the responses. Best community ever!

Hi Rodrigo, Thanks a bunch! Have been using GSAP for years and years. Very happy with it. The problem like I said above is that setting the duration on a paused timeline does not work.

Hi amazing fellow green sockers! I work mainly with paused timelines as we build mobile banners that are tied to the scroll. So I set all my timelines to be paused from the start as I don't need them to play before I seek through them based on scroll. Is there any way to set the duration of a paused timeline? Thanks a bunch! ❤️