Timeline tween duration from point A to point B

[katerlouis]

I'd like to have a dynamic duration for a tween.

Example:

A button animates and builds itself up.

Then the text animates.

While the text animates I want the button to scale just a tiny bit.

The scale should exactly end when the text animation is complete.

 

During development the timing of the text animation changes extremely often and differs dramatically.

Remembering to set the scale duration by hand is annoying and unnecessary distraction.

Calculating the timings of all the parts building the text animation is even more annoying.

 

I'd love the scale-animation to have a dynamic duration alá "until end of text animation" or "until end of whole timeline" or even better "until label XY"

 

If this isn't possible, which I fear is the case, how do you tackle timings of longer animations parallel to a queue of smaller pieces that should end together?

 

Thank you!

 

[PointC]

Hi kreativzirkel 

 

Welcome to the GreenSock forum and thank you for being a Club GreenSock member.

 

If I understand your question correctly, that shouldn't be too difficult.

 

When you want a tween duration to be based on another tweens duration that could change, you'd want to use variables. You can put arithmetic into a tween for the duration. So, for example, you had something like this:

var time = 2;

// you can then use that in a tween for the duration
TweenMax.to(yourElement, time/2, {  });

Then you can use the position parameter to overlap tweens or create time between them etc. Here's some more info about the position parameter.

 

https://greensock.com/position-parameter

 

Hopefully that's what you meant and is helpful. If you'd like more detailed answers, could you please create a CodePen demo for us? Here's some more info about that.

 

https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Happy tweening and welcome aboard.

[katerlouis]

Thanks for the warm welcome.

 

I care a lot about details and finding the right animation for an idea is best done by just doing it. 

So I find myself often implementing different ideas for an animation and want to do the code quick and dirty, but still care for the little details.

 

You see why variables don't satisfy me in this matter. 

Furthermore, using a master-time-variable limits you in some way cognitively. You always go like /2, *1.5– 

 

Not rarely it turns out for an individual step exactly 0.135s is perfect. Finding this with a time variable feels very unnatural and maybe even counter productive.

 

 

Is there really no way to tell a tween something like:

"ok, from here on out you take all the time exactly until the end of the whole timeline".

 

There must be a way..

It's possible to say 

animation().pause().totalDuration()

Why can't something similar happen in the middle of a timeline? 

Then the tween looks "okay, the total duration is 10, and I start at 5.5, so I need to do my stuff in 4.5 seconds, ez!"

[PointC]

Yeah - you could definitely find out how much time is left in one timeline and then tween the progress of another timeline to match that value.

 

As I mentioned in your other thread, almost anything is possible with a plan and some creativity. There are some pretty smart people around here that can help when you get stuck. If you could put together a demo, we could start giving you more detailed answers.

 

Thanks.

 

[GreenSock]

Yeah, Craig is right - that's generally what variables are for

 

The problem with building some sort of API functionality like "until labelXYZ" or "until the end of the timeline" is that it'd require constant re-calculation and GSAP is highly optimized for performance. So if, for example, you have 500 tweens in a timeline and then you move one of them, it'd have to loop through EVERY tween and say "is that one affected by this change?", and then if it was, it could affect one that already changed too and it'd get crazy with recursion. Or internally we'd have to set up dependencies/listeners for timing changes and have those ripple out, but that's more kb and processing. The benefit just doesn't seem worth the cost, especially if it's not terribly difficult for users to do now using variables. See what I mean? 

[OSUblake]

A dynamic duration for a tween like that would most likely not be smooth. You'd have to do some animation blending, which is not trivial. Here's an example using the ModifiersPlugin.

See the Pen RRLxwN?editors=0010 by osublake (@osublake) on CodePen

 

Can't you write a function that sets the duration for your scale tween?

[katerlouis]

Niiiice! Multiquote– love it <3

 

Yeah, Craig is right - that's generally what variables are for

 

The problem with building some sort of API functionality like "until labelXYZ" or "until the end of the timeline" is that it'd require constant re-calculation and GSAP is highly optimized for performance. So if, for example, you have 500 tweens in a timeline and then you move one of them, it'd have to loop through EVERY tween and say "is that one affected by this change?", and then if it was, it could affect one that already changed too and it'd get crazy with recursion. Or internally we'd have to set up dependencies/listeners for timing changes and have those ripple out, but that's more kb and processing. The benefit just doesn't seem worth the cost, especially if it's not terribly difficult for users to do now using variables. See what I mean? 

 

I figured there's a reason my request isn't implemented. 

Although I think many animations (like mine so far) are straight forward and don't change like you describe it (moving parts around while executing) – So it efels like the calculation for "until the end" / "until that label" only needed to be once.

But I see what you mean and sadly agree–

 

 

A dynamic duration for a tween like that would most likely not be smooth. You'd have to do some animation blending, which is not trivial. Here's an example using the ModifiersPlugin.

See the Pen RRLxwN?editors=0010 by osublake (@osublake) on CodePen

 

Can't you write a function that sets the duration for your scale tween?

 

So far I haven't used functions as parameter values. Could you provide an example of what you mean? How exactly would you do what you're suggesting?

[katerlouis]

Little update!

this here worked just fine:

.to($layers, tl.totalDuration(), { rotation: rand(10,20,true) }, 0)

Lets say the timelines duration is 6 seconds.

When you edit above line to a position offset of `2`, the duration of this tween would still be 6 seconds. Great! Otherwise it would be Oblivion!

 

Now I am looking for a way to ask for a labels position. 

How could I do that?

[OSUblake]

So far I haven't used functions as parameter values. Could you provide an example of what you mean? How exactly would you do what you're suggesting?

 

It'd be better if you provided an example because I don't know what's going on in your code.

 

To get info about a label, look in the docs for methods the start with .get, like .getLabelTime.

[katerlouis]

Here's an example of how .totalDuration() can be used to make a tween last dynamically over the duration of the whole timeline.

The position in the timeline where .totalDuration() is called is crucial. But once understood, it is very useful.

 

See the Pen KWwLLj by katerlouis (@katerlouis) on CodePen