Jump to content
GreenSock

Tom Hartnett

Tween takes longer each time

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

 

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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 ;-)

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×