Best way to fill timeline

[multivac]

I know this is a very simple question ... with multiple solutions. I'm just curious to see what would be your best solution.

 

My requirement states that the timeline duration must be at least 30 seconds. My actual animation lasts 27 seconds. I would like to "fill" the timeline with absolutely nothing happening for the last 3 seconds, without changing the time scale. The timeline doesn't repeat and the initial timeline duration is unknown.

 

What would you do ?

[Sahil]

If it is going to repeat then you can add repeatDelay of 3 seconds, if not then just add empty tween that does nothing.

 

See the Pen vWYJjO?editors=0110 by Sahil89 (@Sahil89) on CodePen

 

[multivac]

@Sahil Wow. Nice. I didn't thought about this one !

[GreenSock]

Two other minor comments:

1. You don't even need to use a real target on that final (blank) tween, like tl.to({}, 30 - tl.duration(), {}) or even tl.set({}, {}, 30 - duration()).
2. If your goal is to stretch the timeline so that it fills 30 seconds exactly (rather than putting an empty filler at the end), you can set its duration after populating it with all your tweens, like tl.duration(30) which will set the timeScale accordingly. 

Happy tweening!

[Regis]

Hi,

 

I tried your solution because I got the same issue. I had some animations declined I several instance with different animations in it. The must call en function at the end (calling next animation) the duration must be at least 10 second.

When I call the tl duration it returns 11s if if time the animation it's duration is around 7s. So calculating 10 - tl.duration() is -1s... (when played in firefox).

How to be sure of the real duration of the timeline ?

[Sahil]

you can do

 

(10 - tl.duration() < 0 ? 0 : 10 - tl.duration())

 

That will return zero if duration is less than zero.

[OSUblake]

Fill your timeline using the position parameter.

var tl = new TimelineMax()
  .to(foo, 4, { x: 100 })
  .add(nextAnimation, 10)

 

[Sahil]

Quote

Fill your timeline using the position parameter.

 

Oh right, you can use position parameter with absolute value 0. So irrespective of whether your animation is long or short, it will always be at least 10 second long.  You don't need all the unnecessary calculation or duration etc.

 

See the Pen MORKzG?editors=0011 by Sahil89 (@Sahil89) on CodePen

 

[Regis]

The next animation need to call a function (when the animation are on a media player). I call this function in an onComplete callback, calling the parent to let it know that the current animation is finished, the next could be a video or an image, not always an other animation, I use a software which control what to display independently.
 

Sahil duration should return 7s, which is the timed duration, and not 11s that's my problem.

 

[OSUblake]

Didn't see your duration might go over 10, but you could do the position parameter just like @Sahil showed.

[Regis]

The duration (tl.duration()) is computed on all the duration information of the tweens ? So it depends on the hardware and browser whith which it is played, the same animation which duration is 10s (calculated) could be 7s on a fast computer or 12s on a slow computer ?

[OSUblake]

2 minutes ago, Regis said:

I call this function in an onComplete callback, calling the parent to let it know that the current animation is finished, the next could be a video or an image, not always an other animation, I use a software which control what to display independently.

 

Put your onComplete callback there. Same thing.

 

The duration is based on all the tweens.

 

If you're having issues, please make a simple demo so we can see what the problem is.

[Regis]

Hi,

 

In fact its working I don't know what went wrong with my first tests.

 

Regards,