Setting duration of a paused timeline

[playgroundxyz]

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! ❤️

[Rodrigo]

Hi and welcome to the GreenSock forums!!!

 

There are a few methods you can use in order to update the duration of a timeline. Please check this links from the docs:

 

https://greensock.com/docs/v3/GSAP/Timeline/duration()

https://greensock.com/docs/v3/GSAP/Timeline/totalDuration()

https://greensock.com/docs/v3/GSAP/Timeline/timeScale()

 

Keep in mind that timescale is a different approach than duration and total duration, but it can be very useful as well.

 

If you have more doubts, please provide a minimal codepen demo that illustrates what you're trying to achieve.

 

Happy Tweening!!!

[playgroundxyz]

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.

[Rodrigo]

Hi,

 

It seems to work here usint .duration():

See the Pen QWrjdyv by rhernando (@rhernando) on CodePen

 

Plus I'm positive that you can stretch the duration with timeScale, since I have used that many times.

 

Can you provide a simple live example to get a better look?

 

Happy Tweening!!!

[GreenSock]

Think of a timeline like just a container for tweens (and other timelines), thus its duration is solely a function of its children. In other words, an empty timeline is always going to have a duration of 0. If you put a 1-second tween into it, now that timeline will have a duration of 1 second. Again, it's just a wrapper! 

 

When you SET the duration or totalDuration of a timeline, it merely changes the timeScale(). So, for example, if you've got only a 1-second tween in a timeline and then you set the timeline's duration to 2 seconds, it would actually just change the timeScale() to be 0.5. If you checked the duration immediately after that, it'd still say 1 because that's accurate - it's referring to the fact that from it start (time: 0) to the very last child ends (in this case 1 second), it only amounts to 1 second. 

 

If we didn't do it that way, things would get very strange. Like if you populated a timeline with a 1-second tween and then set the duration of the timeline to 2 seconds...would that alter the duration of each child? What if you moved that child's startTime to 3 - would that now make the duration of the timeline 5? But you set it to be 2...so would it then force everything to fit forever after that into 2 seconds, thus the child would get squeezed down to actually be less than 1 second because it's got 3 seconds of delay beforehand...but not really because how could a 2-second timeline have a 3 second delay internally? Things start getting very strange when you approach timelines as something other than a wrapper duration-wise.

 

Does that clear things up? 

[playgroundxyz]

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

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

[Cassie]

Is it not possible to make a codepen with a few coloured boxes and some range sliders? From what I understand you're talking about staggering some images, the variables are the number of boxes and the stagger and you want to work out a scroll distance to scrub the animation over?

That sounds pretty reasonable to set up in a codepen demo. We don't need it to be styled and we don't need all the logic that bumps out whatever the scroll variable is, you can just hardcode in an output value

 

What is units of scroll? Pixels? Are you talking about scrubbing an animation with scrollTrigger?

Quote

 the start point is at 10 scroll position and end at 45 for example. So duration 35.... 35 units of scroll

 

If you can pop together a demo we can take a look!