Tween takes longer each time

[Tom Hartnett]

Hi Guys,

 

Weird problem. I've got a tweenline:

var tweenCurrentPage = new TimelineMax({paused:true, onComplete:testComplete, onReverseComplete:changelogo});
element = '#aw-heading';
tweenCurrentPage.to(element,0.5,{autoAlpha: 1});

This works fine the first time and the effect lasts 0.5 seconds.

I then reverse the animation this works fine; it lasts 0.5 seconds

 

I then try and play the animation for a second time... this takes 1 second.

and when reversed takes 1 seconds.

 

Every time I do the animation, it takes an additional 0.5 seconds (or whatever this initial effect time was set to)

 

I'd be very grateful for any ideas on how I might solve this problem?

 

If it's any help, I've looked in the TweenMax.js file and

this.totalDuration()

on line 5422. Is incremented by the 0.5 secs every time. I haven't managed to work back further than this yet.

 

Thanks all!!

 

Tom

 

 

[Carl]

Hi and welcome to the GreenSock forums.

 

Sorry to hear you are having trouble.

That's very strange behavior you are describing.

 

It would really help to see this in a reduced test case.

 

I created a codepen to test your code and could not replicate the issue.

 

http://codepen.io/GreenSock/pen/866157bcab7f1f1a36dcd8977d4426f3

 

Feel free to fork that or provide stand-alone files that show the error.

 

Thanks

[Tom Hartnett]

Thanks for replying. I've put together this codepen which shows the problem:

 

See the Pen JgcIr by tom_hartnett (@tom_hartnett) on CodePen

 

Thanks for your help

Tom

[Rodrigo]

Hi Tom,

 

In the following code:

function animatePage(){
  area = "aw";
  element = '#'+area+'-heading';

  start = new Date().getTime();
  //here you add a new instance every time you
  //execute this function
  tweenCurrentPage.to(element, 0.5,{autoAlpha: 1, delay:0});
  console.log("Animating heading: "+element);
  tweenCurrentPage.restart();

}

function testComplete() {
 console.log(tweenCurrentPage.totalDuration());
 //if you add this call you'll see that
 //your timeline has more instances every time
 console.log(tweenCurrentPage.getChildren());
}

The issue is that every time you execute the  function you're adding one more instance, therefore you're timeline becomes longer and longer.

 

You could use either the clear method or the remove method in order to empty your timeline before adding the new instance.

 

Hope this helps,

Rodrigo.

[Tom Hartnett]

Awesome. Thanks so much for the answer!

 

I has my suspicions that it was something like that but couldn't work out how to fix it.

 

I'll check out clear and remove and work out the fix

 

Thanks again.

 

p.s. Loving Greensock... and it's forum