Animation inside wordpress is not smooth in chrome

[nowwwmad]

Hi there !

First huge thanks for the good job. It's so cool to play with your script :-) I'm not a developer, so i'm not sure that it's a script issue but maybe someone experienced the same problem and could guide me some advice :-)

On the WIP home page of my site i have a logo animation that run really well on firefox but seems to be slower in chrome. The strange think is that it work well on chrome with the same code using codepen.

Do you know what could cause this issue ?

Thank's to give "a code newbie" the ability to play with animations :-)

[bodymovin]

Hi, can you share a link so I can check it out?

[nowwwmad]

Sorry for the missing links ! The wordpress's page is here : http://hasenfratz.fr/ (in chrome is less speed than in firefox) The codepen's one is here : https://codepen.io/nowmad/full/POLOLo/ (it's as speed in firefox and chrome)

Thank's !

[bodymovin]

it doesn't look like a performance issue. but the character seems to have a large square shape around it. Is that possible?

[nowwwmad]

Hi, Thank's for your reply. I make the css simpler (i'm quite a newbie so i'm trying ;-) So know i juste have put give the svgContainer this scale : width: 35%; height: 35%; and center it in the parent div with top: 0; left: 0; right: 0; bottom: 0; margin: auto;

But it's still slower in chrome than firefox : http://hasenfratz.fr/ You can see it in the intro part when the bunny jump and when the texte change from HASEN.DESGN to JULIENHASENFRATZ... And you can see it every 8 sec when the bunny turn his head and then wiggle like if he is laughing, which work well on firefox but is nearly not notable on chrome. Do you see the differents on your side ? I'm on macbookpro, chrome Version 62.0.3202.94 and firefox 57.0

Thank's !

[nowwwmad]

Hi ! It really seem that i have some issue because of the wordpress theme i am using. Because i play with script on codepen and don't see any issue on it. When i try to inset the same code in my worpress theme i have issue with speed and some time with alignment on mobile (on chrome) On firefox everything work really well also on mobile (android / huawei P10) I don't understand what hapend :-/ Thank's !

[bodymovin]

It seems the renderer is drawing a different animation rather than a performance issue. Can you try loading the animation in an empty wordpress page to see how it goes?

[nowwwmad]

Hi ! I only put the animation in an empty page of the theme here : http://hasenfratz.fr/test_bodymovin/ But there is still the menu on it... Is that what you wanted to see ? Thank's ! julien

[nowwwmad]

The animation play again when you scroll down and up with this code :

$(window).scroll(function(){
  var windowWidth = $(this).width();
  var windowHeight = $(this).height();
  var windowScrollTop = $(this).scrollTop();
// Reset animation when user scroll 
  if(windowScrollTop>200){
    anim.goToAndStop(0,true);    
  }
  else if (windowScrollTop==0){  
    anim.playSegments([[0,50],[51,200]],true);    
           }
  }); 

And i play it when the page load with this :

$( window ).on( "load", function() {
    window.setTimeout(function() {
        anim.playSegments([[0,50],[51,200]],true);
    }, 1000);

});

[nowwwmad]

Ah ! If it can help other's the problem of my theme was this css rule : svg * { transition: all 200ms linear; } Don't know why firefox handle it differently than chrome but it's why on chrome the animation seems to jump over frame and also was slower...

Last question : is this the good place for questions or is it only for issue ?

Thx for your reply and for the greeeat job on this plugin :-)

[bodymovin]

Nice! Glad you found the issue. Sure, you can ask here.