Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
yasserzakaria1993

shaking while animation on chrome only - please help me

Recommended Posts

Hi everyone,

I recorded this video to explain the issue with more details:
Video Link: https://screencast-o-matic.com/watch/cqn3rm0iYG

and here is the live site:
http://yasserzakaria.com/sauditimeline/

 

See the Pen yZmBRq by yasserzakaria1993 (@yasserzakaria1993) on CodePen

 

See the Pen yZmBRq by yasserzakaria1993 (@yasserzakaria1993) on CodePen

Link to comment
Share on other sites

Welcome to the forums, @yasserzakaria1993. Thanks for providing the demo AND a video. You're quite the overachiever! We love that. 

 

I can't see any shaking whatsoever, but I know there was a Chrome bug (unrelated to GSAP) at least on the Mac version that caused slowdowns when 3D transforms were applied (which, of course, is the opposite of what should happen because 3D transforms should promote layerization to the GPU). I wonder if you'd see any improvement if you set CSSPlugin.defaultForce3D = false. Or maybe even try adding this to your CSS: will-change: transform. But be careful - https://greensock.com/will-change. 

 

You said that adding a slight rotation didn't help either, right? 

 

It looks like your original project (not the codepen) has a lot of graphics taking up the whole screen and beyond, so keep in mind that puts a lot of strain on the browser in terms of painting pixels on every tick (again, unrelated to GSAP). I realize you said that other browsers are acceptably fast, but I wonder if you just hit a particular edge case with Chrome with how it decides to rasterize/layerize things at certain sizes which isn't optimal in this case. Tough to know for sure without seeing the real project. Again, your demo looks super smooth to me in Chrome. 

  • Like 4
Link to comment
Share on other sites

I can see some shaking on Chrome in Win7 64.

 

This basically has to do with the fact that your page is using a lot of CPU cycles probably for a lot of calculations.

 

There are two aspects that caught my attention.

 

One, you have this PNG file http://yasserzakaria.com/sauditimeline/images/tlBackground.png that is transparent. Transparent PNG files, specially big ones, can be very expensive. Try without it and see how it goes.

 

Two, you are moving this element:

<div class="tl-eras-container" style="width: 22500px; transform: translate(27.3895%, 0%) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);">
  <div class="era" style="flex-basis: 2250px;"></div>
  <div class="era" style="flex-basis: 1750px;"></div>
  <div class="era" style="flex-basis: 3500px;"></div>
  <div class="era" style="flex-basis: 15000px;"></div>
</div>

 

That's 22500 px width, that's huge. This element is being constantly animated. Also you're animating another 22500px width element at the same time and finally you're animating a 2250px width element. All elements are being animated at the same time and that's causing a lot of calculations and repaints, and that's stressing a lot the CPU. In a smaller screen size performance is better.

 

In terms of performance some layer updates are taking up to 35 milliseconds and the fps are dropping to 16 per second, that's definitely not good.

 

My advice would be to try to move the card elements and not the entire wrappers/containers, especially that big, that could reduce the amount of calculations the CPU has to make. Also see if you can include either canvas or WebGL into the app, in order to improve performance.

 

Finally, regardless of the performance issues, that is one good looking site, very appealing, intuitive, easy and fun to use, nice job!!!

 

Happy Tweening!!

  • Like 4
Link to comment
Share on other sites

Hi Guys, @GreenSock and @Rodrigo

I really thank you so much for helping me, I appreciate that. you are GREAT.

I recorded another video: https://screencast-o-matic.com/watch/cqnZVy0jyv

I can send you the code, if this will help, you have a better experience and you can tell me about my mistakes on the code.

again, thanks guys for everything :) 

Link to comment
Share on other sites

Oh, I think the problem is actually that you have Dev Tools open! That puts a LOT more strain on the browser because it has to track and report a bunch of stuff, like all the CSS styles that get updated on every tick have to show up inside Dev Tools and get highlighted, etc. Try closing Dev Tools :)

 

If you do a performance snap shot in Dev Tools (see attached), you'll see that the vast majority of the work is the rendering, not the execution of JavaScript. In other words, it has little to do with GSAP or CSS animations - it's browser rendering. You've got a lot of pixels that must update on every tick. I'm not sure there's a magic bullet here outside of rebuilding in <canvas> or something. 

 

Oh, and no, it can't be a server issue because that would only affect load time. All the animation stuff happens client-side. 

 

You might also want to open the "layers" area of Dev Tools and look at what you've got going on there - it's a LOT. And very big layers that need repainting/compositing. Even if you just refactored the scrolling background graphics to be in <canvas>, that might help a lot. 

 

I wish I had a great answer for you, but I think you'll notice things perform better when Dev Tools is closed :)

performance.png

  • Like 4
Link to comment
Share on other sites

Yep, I also notice artifacts when DevTools is open (especially when Elements tab is open and tweening node is selected or when there's a lot of console logging).

 

And I see no shaking in my Chromium on Ubuntu. 

  • 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.
×