TweenLite randomly doesn't start while TweenMax always starts [solved]

[pault]

Hi,

 

I just ran into a strange problem. Somehow a very simple alpha tween doesn't start 50% of the time. To make sure I was doing everything correctly I checked wether or not had the correct reference to the object, which seems to be the case. I can manually set the opacity of the element on my page without any problems. I also verified wether or not TweenLite was available at all, but it is and nothing seems to be wrong here. My code gets executed once the document is ready, which rules possible issues due to that out as well.

 

While testing I also added an onStart and onComplete callback with a console.log. Both did not get triggered when my animation did not start.

 

There is also no other place in my application that is controlling the same component.

 

So far it could somehow still be an error in my code, but the fact that after switching to TweenMax the problem doesn't occur anymore, makes me think the problem resides in the library.

Does anyone encountered this issue as well? And is there a way to work around it, besides using TweenMax?

 

The tween that doesn't work is:

TweenLite.to(this.$el, 1, {css:{autoAlpha:0}});

and the one that does work is:

TweenMax.to(this.$el, 1, {css:{autoAlpha:0}});

 

Nothing special here, except maybe for autoAlpha. I also tried changing that to alpha, but the problem was still there.

 

Thanks in advance,

 

Paul

[pault]

Ok, so I just checked the versions of TweenLite and TweenMax. I though I had the latest versions, but it seems you've been working hard on the project and I was already quite a bit out of date. I ran TweenLite 1.27.

 

At first I thought this fixed the issue. but apparently it does not. It seems to be related to wether or not I load TweenMax.js. When TweenMax.js is loaded, TweenLite also works fine.

[GreenSock]

A few questions:

 

1) When you DON'T load TweenMax, are you loading CSSPlugin?

 

2) Can you please post a very simple example HTML file that demonstrates the issue? It's super helpful when we can actually see this happening. I haven't heard any other reports of this behavior. I'm sure that once we see a sample file that reproduces the issue, we'll be able to fix it very quickly.

[pault]

Hi Jack,

 

Thanks for your quick reply! I am indeed loading the CSSPlugin (as well as the easepack)

 

What I did not mention in my first post is that it was not happening in Firefox but it was happening in Chrome (did not test other browsers so far).

 

I've just tried to create an isolated version to demonstrate the problem. I was already afraid that it was not that easy to demonstrate, as obviously, else you would have noticed it yourself.

 

What I've noticed is that when I store a reference of the tween and log its properties is that _startTime is always 0 when the tween does not start. Does that make any sense?

 

This got me thinking and lead me to the requestAnimationFrame polyfill by Paul Irish that I'm using (http://paulirish.com/2011/requestanimationframe-for-smart-animating/)

So I disabled my code that was using this polyfill and it all worked fine.

 

While writing the above down I had another look at my code and noticed the problem. I was incorrectly calling cancelAnimationFrame(0), while animationFrameID 0 probably being an ID that is used internally by TweenLite. After correcting this mistake, everything seems to be working as expected! It doesn't clarify to me why using TweenMax did solve it, but apparently that is using a different animationFrameID.

 

So long story short. My bad for canceling the animationFrame.

 

Anyway, thank you so much for being helpful and for your wonderful library. Except for this little problem I was having today, it makes my work so much easier and it allows me to create very visually rich applications in a super easy way. Thank you so much!

[GreenSock]

Aha, that makes sense. Thanks for the explanation.