jQuery addClass() and Tweenlite interfering with each other?

[4foot30]

Hello,

 

I've run into a strange problem with Tweenlite beta 1.9.0 and jQuery 1.9.1, so far only in Firefox (fine in Chrome).

 

Given this:

nextButton.addClass('scrolling');

// Kill any running scrolling animation
TweenLite.killTweensOf($('#thumbnails'));

// Tween to new target position
TweenLite.to($('#thumbnails'), 1, {marginLeft:targetPosition, ease:Power1.easeInOut, onComplete:function() {

	// Remove scrolling class so the button can be clicked again (if it's not disabled)
	nextButton.removeClass('scrolling');

}});

...I've found that in Firefox the class 'scrolling' is only being added to nextButton when the tween finishes - nothing happens before the tween starts.

 

I've tried the above code as well as trying to add the class in the tween onStart function - same problem.

 

Strangely if I increase the duration of the tween to about 2 seconds, the problem goes away and the class is applied when it should be.

 

If anyone has any thoughts I'd appreciate it, I assume I'm just doing something stupid...

 

Thanks!

 

Gareth J

 

 

[jamiejefferson]

Hi Gareth,

 

Are you absolutely sure that

nextButton.addClass('scrolling');

is not working? Try the following and see if you get a contrary result:

nextButton.addClass('scrolling');
TweenLite.to($('#thumbnails'), 1, {marginLeft:targetPosition, ease:Power1.easeInOut, onComplete:function() {
	nextButton.removeClass('scrolling');
}, onUpdate:function() {
	console.log(nextButton.is('.scrolling')); // should be true for the duration of the Tween
}});

If you are basing this off of the DOM inspector/firebug only, then I might suggest that it probably is being added, but the update rate of firebug is not letting you see it at the exact moment it is actually added (inspectors try to take as little resources as possible so that normal browser processes aren't significantly affected, which usually results in some delay in updates for the DOM inspector - especially when tweens are updating DOM values multiple times a second).

 

If some of your code is relying on nextButton having class .scolling while the tween is running and it isn't working, could you isolate just the HTML and javascript that exhibits this problem in a small demo (

See the Pen KaorG by GreenSock (@GreenSock) on CodePen

and jsfiddle.net are great for this) so we can have a better look at it?

[Carl]

Thanks a ton for jumping in, Jamie. My thoughts exactly. I'm curious if the class NOT being added was being verified via inspection tools or the actual appearance/behavior of the element on the page.

 

4foot30,

 

Here is a starter pen that you can fork and edit.

See the Pen KaorG by GreenSock (@GreenSock) on CodePen

 

It is configured to load TweenMax 1.9.0 and latest jQuery.

We'd love to help you through this and it would be most useful to have an example that we can test and inspect.

 

Thanks!

[4foot30]

Hello - thanks for your help both, this is brilliant.

 

You've nailed it - there's nothing wrong with the code, Firebug simply wasn't updating fast enough to show me that the new class was there.

 

At the time I posted, I had only added the add/remove class code, which didn't appear to be working.  When I wrapped all that in more code to actually stop the scrolling function from executing when the button(s) had a class of "scrolling" it all worked perfectly.

 

Thanks again,

 

Gareth