Jump to content
nbashiri95

set timeline duration regardless of each tween duration in timelinemax

Recommended Posts

is there anyway to set timeline duration regardless of each tween duration in timelinemax?

 

i used this trick

tl.set({}, {}, 15);

but it only works when time line length is less than the new value

 

Share this post


Link to post
Share on other sites

Hi nbashiri95,

 

Welcome to the forums!

 

It's normally quiet here during the weekend but it's raining around here so, I happened to be around. :D

 

You can set the duration of the timeline with either .duration() or .totalDuration() (only for TimelineMax). More info in the docs.

 

Happy tweening!

  • Like 4

Share this post


Link to post
Share on other sites

Hi nbashiri95  :)

 

Welcome to the forums.

 

Dipscom is right - you want to use duration() for that. It's important to note that by using duration as a setter, you're not changing the actual duration of the timeline, but you are adjusting the timeScale()

 

If I have 5 boxes and use the following code:

tl.staggerTo(".box", 1, {x:500}, 1);
tl.staggerTo(".box", 1, {rotation:360}, 1);

tl.duration(2).play();

That timeline will play over 2 seconds, but the console will still log the duration as 10 seconds. 

 
Here's a simple CodePen with that setup for you.
 

See the Pen RRLrmb by PointC (@PointC) on CodePen

 
Hopefully that helps.
 
Happy tweening and welcome aboard.
:)
  • Like 4

Share this post


Link to post
Share on other sites

thank you for your attention,

 

the problem is i want to change the timeline length without affecting tweens, i wanted to know is there any way to implement that?

considering I'm adding tweens after page load.

  • Like 1

Share this post


Link to post
Share on other sites

I don't follow. What is it that you have in mind when you say you want to change the timeline length without affecting the tweens? One is linked to the other. A timeline length will be the accumulated duration of the tweens, pauses and repeats.

  • Like 1

Share this post


Link to post
Share on other sites

Hi,

 

Beyond what Dipscom and Craig have suggested already, there's no way around this. Altering the natural duration of a timeline will affect the duration of it's nested instances and viceversa. A timeline is a container of tweens and other methods, just that. So when the timeline starts at time zero all instances in it are set to that specific position and the timeline will be completed once all the instances in it are complete as well.

 

Changing the duration of the parent timeline will change the original duration of it's nested instances, specially if you set a duration smaller than the original (as you already discovered), that will proportionally reset the duration of the nested tweens in it to accommodate them to the new parent duration.

 

Could you share a small reduced sample in codepen in order to see what you're after?. To be completely honest I can't remember another user asking for this type of functionality before.

 

Finally the only way around this is to create two different timelines, one with the instances in it and an empty one with a shorter duration and all the needed callbacks, but again I'm having a bit of a hard time wrapping my head around what you need.

 

EDIT:

If you need some sort of specific callback before the timeline is completed you can use either the add or call methods.

 

Call Method

http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/call/

 

Add Method

http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/add/

  • Like 4

Share this post


Link to post
Share on other sites

Hello,

 

The only thing i can think of is, if you meant to change the timeScale() of your timeline/tweens.

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/timeScale/

 

Factor that's used to scale time in the animation where:

  • 1 = normal speed (the default)
  • 0.5 = half speed
  • 2 = double speed, etc.
myAnimation.timeScale( 0.5 ); //sets timeScale to half-speed

Using timeScale() allows you to have your animation time to be scaled, whether it be half-speed, double the time, or whatever you want it to be.

 

If this doesn't help,or you didnt mean this..  then a codepen example like Rodrigo advised will be very helpful in helping you!

 

:)

  • Like 3

Share this post


Link to post
Share on other sites

Hi nbashiri95,

 

Everything the guys have said about changing the duration() of a timeline altering the duration of the child animations is true, but I think you meant something different. It sounds to me that you just wanted to make sure that even if your timeline only had 3 seconds worth of animation in it that new tweens would be added at 15 seconds. In other words you wanted to add 12 seconds of dead space after the existing tweens (thus making the duration() 15).

 

If this is the case then, yes, what you suggest with adding a blank set() at 15 seconds is fine.

tl.set({}, {}, 15);

similarly you could just use 15 as the position parameter of the first tween that you add after page load like:

tl.to(element, 1, {opacity:0}, 15);

If you need more help or clarification please let us know. Hopefully you can see that everyone is eager to help :)

  • Like 3

Share this post


Link to post
Share on other sites

In Flash/AS3, I remember being able to add a label at a specific time beyond the last animation, and it would extend the overall timeline's duration to that label. I thought this was working in JS, but after closer inspection, it wasn't. tl.set({},{},time) worked!

 

For those wondering why this might be needed, here's my use case. I'm syncing up some animations to a video. The GSAP timeline needs to be as long as the video duration even though the animations might not last until then. When I seek/play/pause the video, the timeline is seeked/played/paused accordingly. I was running into issues when seeking to a part in the video that was beyond the timeline's duration (before this fix).

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.