Changing duration on the fly (Tweenlite)

[Guest MartyMC]

Hi community,

 

as I unterstood here : http://forums.greensock.com/viewtopic.php?f=1&t=4134, by changing the duration, you also change the starttime to avoid jumps in the value?

 

For example, I´d like to tween a prop of a non-display-object, from 10 to 1 in 30 seconds.

If an event occurs while tweening, the duration should change to tween.currenTime + 1, so the rest Time of the tween changes to 1 second.

 

I get a big jump in my tween.

value :8.747872249999999

value :8.727844009999998

value :8.71006289

change tween duration

value :1.8068295853664207

value :1.7495392636005391

value :1.699005643644183

 

I just made it like this :

var newDuration:Number =  tween.currentTime + 1;
		tween.duration = newDuration;

 

Any advices to get a smooth tween-duration-change.

I played with "startTime", but didn´t get a dood result.

 

BTW: Thanks for this great lib.

[Carl]

If an event occurs while tweening, the duration should change to tween.currenTime + 1, so the rest Time of the tween changes to 1 second.

 

do you mean that after the event occurs the tween should only take 1 second more? if so I don't think you need currentTime + 1.

that means if the tween is 4 seconds into the 30 seconds the tween would then take 5 seconds to finish.

 

I did a quick test with this and got results with no jump:

 

import com.greensock.*;
import com.greensock.easing.*;

var prop:Number = 10;

var tween:TweenMax = TweenMax.to(this, 30, {prop:1, ease:Linear.easeNone, onUpdate:traceIt})

function traceIt(){
trace(prop);
}


stage.addEventListener(MouseEvent.CLICK, resetDuration);

function resetDuration(e:MouseEvent):void{
trace("\nchangeTween\n")
tween.duration = 1;
}

 

this is the output that I got:

 

9.9397

9.9349

9.9289

9.916

9.904

9.8908

9.8788

9.8659

9.8539

9.841

9.829

9.8158

9.8038

9.7909

9.7789

9.7657

9.754

9.7408

9.7288

9.7159

9.7039

9.691

9.679

9.6658

9.6538

9.6034

9.5983

 

changeTween

 

9.3463

8.9863

8.626299999999999

8.2393

7.8793

7.4833

7.0963

6.7363

6.3763

5.9893

5.6293

5.2333

4.8463

4.4863

4.1263

3.7393

3.379299999999998

2.9833000000000016

2.5963000000000003

2.2363

1.8762999999999987

1.4892999999999983

1.129299999999997

1

 

is that more what you are expecting?

 

it is possible I am mis-understanding you.

[Guest MartyMC]

EDIT: Sorry, didn´t scroll down your code to see the function. It´s the way, like Idid. Strange.

 

 

Exactly. In your case the totalduration of the tween would be 5 seconds. 4 sec. slow (aim the target in 30 sec.) + 1 sec fast (reduce the restTime(26sec.) to 1 sec. )

Can you post your resetDuration-function?

 

If I reset the duration to 1sec. and the currentTime of the tween is higher than that, the value is directly set to target-value.

 

value: 8.34301604

tween.currentTime : 2.902

value: 8.32568356

tween.currentTime : 2.934

value: 8.30837156

tween.currentTime : 2.966

reset duration to 1 second

value: 1

tween.currentTime : 1

 

function resetDuration():void 
	{
		var restDuration:Number =  1

		tween.duration = restDuration;
		trace ("reset duration to 1 second");

	}

 

Thanks, Martin.

[Guest MartyMC]

Using the same code but get other results.

 

For Flashdevelop:

 

package 
{
import com.greensock.TweenMax;
import flash.display.Sprite;
import flash.events.Event;
import com.greensock.TweenLite;
import flash.events.MouseEvent;
import com.greensock.easing.*;

public class Main extends Sprite 
{
	public var prop:Number;
	private var tween:TweenMax;

	public function Main():void 
	{
		prop = 10;
		tween = TweenMax.to(this, 30, {prop:1, ease:Linear.easeNone, onUpdate:traceIt})

		stage.addEventListener(MouseEvent.CLICK, resetDuration);

	}
	private function resetDuration(e:MouseEvent):void
	{
		   trace("\nchangeTween\n")
		   tween.duration = 1;
	}				
	private function traceIt():void
	{
		trace(prop);
	}

}

}

 

I got this output:

9.9664

9.9544

9.9472

9.9403

9.9322

9.9253

9.9184

9.911200000000001

9.9043

9.8971

9.8902

9.877

9.8698

9.8566

9.8497

9.836500000000001

9.8296

9.8164

9.8092

9.796

9.7891

9.7759

9.769

9.7609

9.7513

9.7417

9.7312

9.7213

9.7117

9.7012

9.6916

9.6811

9.6712

9.6616

9.6511

9.6415

9.631

9.6211

9.6115

9.601

9.5914

9.5809

9.571

9.5614

9.5509

9.5413

9.5314

9.5209

9.5113

9.5017

9.4912

9.481300000000001

9.4708

9.4612

9.4516

9.4411

9.4315

9.4207

9.4111

9.4015

9.391

9.3814

9.3706

9.361

9.3514

9.3418

9.3313

9.3214

9.3109

9.3013

9.2917

9.2812

9.2713

9.2617

9.2512

9.2416

9.2311

9.2212

 

changeTween

 

1

 

Strange.

[Guest MartyMC]

It works.

 

I had the newest version as an swc in my lib, but also an older version as soure folders.

Seems the compiler prefered them.

Sorry and thanks.

[Carl]

no problem. glad you figured it out.

 

the conflicting swc and source folders must have driven you nuts for a bit!

[opamint]

I have a problem when I change the duration of the tween "on the fly".

I use repet=-1 option (repeted indefinitely) and when I set the new duration , the tween is stoping after that duration, without repeting the tween.

What should I do in this case?

 

Thank you!

[GreenSock]

Great catch - I needed to change one variable in the duration setter. It's fixed in the latest version. Sorry about the confusion - just download the latest version and you should be all set.

[opamint]

It works!

 

Thank you very much for your quick solution!

[opamint]

Sorry, it's my mistake. The code still doesn't work. When I thy to change the duration "on the fly" for the tween which have reverted flow, the movement stops.

[GreenSock]

Please post a sample FLA that demonstrates the problem. I tested changing the duration on the fly and it seems to work great for me. I wonder if there is some other problem in your code that's causing the issue.

[opamint]

My code is pretty big and I have to make a simple version which shows the same issue. I will send you the fla file tomorrow.

Thank you very much!

[opamint]

Here is the fla file which shows the issue.

Thank you!

[GreenSock]

What do I need to do to see the issue? You provided no instructions.

 

I noticed that if I click "speed1" after reversing, it does stop, but that is to be expected because you're setting the currentProgress to 0 on a reversed tween, which means it goes back to the beginning and since it is reversed, it cannot go backwards beyond the start - see what I mean? Is that the "issue" you were running into? If not, could you explain exactly what I need to do in order to reproduce the problem you were running into?

[opamint]

Yes, this is the issue. You have right, the currentProgress is 0 but I've already tred something like as you are suggesting but still the flow stops.

Here is the code attached.

[GreenSock]

Aha, I see the issue. It had to do with the fact that you were setting the progress beyond 1 (that value should always be between 0 and 1) and it was reversed. What was happening was the tween thought it was done because you pushed it to completion (its end time) but it was reversed and it didn't recognize that it shouldn't consider itself finished. I just uploaded a new version of TweenLite/Max that should resolve that behavior. Please download it and try again.

[opamint]

I know that some instructions are redundant but I've used them hoping that will fix the issue.

I've downloaded the new package but the problem still persists. What else should I change in order to make it works? I've set the currentProgress to 100000 for the reversed flow because I want a virtualy endless loop.

I've also tried the timeScale property, but if the command is repeted this will double the speed of the flow again and again, so I believe the duration property is a better option.

 

Thank you!

[GreenSock]

Ah, sorry about that - I forgot to upload 1 file Should be there now.

[opamint]

Now it realy works!

Thank you very much! I believe that your product is fantastic!

[Wargasmic]

Thanks again. I seem to be pretty much where I want to be now with this, but the last thing is I can't seem to change the duration of the tween (after it has been added). I've tried changing it directly with myTween.duration but this has no effect and I don't see any method for changing duration.

[Carl]

Wargasmic,

 

 

not sure how your question relates to this topic from 3 years ago.

perhaps you need to use the newer duration() method (not property)

myTween.duration(5);