Animation choppy on chrome, but not on chrome codepen?

[gimperdaniel]

This is rather weird. I have the exact same animation hosted on a vps and also on codepen. When viewing on chrome, the animation is choppy and sometimes it even freezes, as if it's struggling to catch up. However when I put it on CodePen it ran just fine. I also noticed that when viewing it in my hosted VPS my laptop fans speed went up, but not on CodePen... any ideas as to what's going on? Everything runs just fin on Firefox and Safari.

See the Pen btKur by anon (@anon) on CodePen

[Jonathan]

Hello gimperdaniel, and welcome to the GreenSock forum!

 

I played this on PC Windows 7 .. on latest Firefox 32, Chrome 37, and IE11 .. and they played ok in your codepen demo.

 

On your hosted VPS webpage do you have the same GSAP verison and jQuery Core and jQuery UI version used in your codepen?

 

You might have other code (HTML, JS, CSS, SVG) running on your hosted VPS... or is your code exactly the same?

• Got a link to your hosted VPS webpage for comparison?
• Is this Chrome on an Apple device?

[gimperdaniel]

I have other code (it's a full website) but I only use greensock library in this one element. As soon as I remove the animation (comment it out) there are no issues. I will get a version running of this code only in my VPS so that I can link it here, I can't have the whole site for demo.

 

I also need to clarify that I was testing on the latest version of Chrome (Version 37.0.2062.120), on a Mac.

[gimperdaniel]

Well.. I removed everything but the gsap code and it worked without hicups. So... I guess there's some conflict with the rest of my code.

 

Is it wise to run TweenMax.js within Jquery's document ready?

 

UPDATE:

 

It looks like TweenMax is not playing nice with the jquery WayPoints plugin. The good news is that I probably can do without that plugin.

[Carl]

Hm, you can certainly wrap GSAP code in a document ready.

 

Doing this in your CodePen demo is perfectly fine:

$(document).ready(function(){
  var ripple_1 = $("#ripple-1 path:nth-child(1)");
  var ripple_2 = $("#ripple-1 path:nth-child(2)");
  var ripple_3 = $("#ripple-1 path:nth-child(3)");
  var ripple_4 = $("#ripple-1 path:nth-child(4)");
  var ripple_5 = $("#ripple-1 path:nth-child(5)");


  TweenMax.staggerTo([ripple_5, ripple_4, ripple_3, ripple_2, ripple_1],1,{opacity:.7,repeat:-1,yoyo:true,repeatDelay:.5},.2);
  
});

So yeah, there has to be something else in play in your production environment.

[gimperdaniel]

Yep. Thanks for the help guys. I will switch to ScrollMagic which uses depends on GSAP.