Animation is laggy on some computers

[balazs-d]

Hi People, 

 

I have some weird issues with a page I created. The animations are an important part and unfortunately its very laggy on some computers. I tested it already on 10 devices (Linux, OSX, Windows different hardware etc). Testing is kind of hard since all the computer I'm using at home for programming the application runs well. Also, the performance test seems to be good. The typical issues like using x and y instead of left and right positioning, and skew and scale instead of transform are correct.  I also use canvas instead of a div. 
Attached is a video how it looks if it's laggy. Under the link you can open the page on Vercel and also see a short video how it looks if its laggy. 

 

I didnt created a CodePen demo yet, since it seems to refactor a lot. Maybe it's enough if I post here the code. Let me know please!

 

I use React and Styled Components. 

 

Laggy: https://www.dropbox.com/s/o8nz4qd5emuu251/VID_20201119_155301.mp4?dl=0

Application on Vercel: https://kh-version2.vercel.app/feed

 

Thanks in advance!

[ZachSaucier]

Hey balazs-d and welcome to the GreenSock forums.

 

Other properties that can slow down your page that I see you using include (in order of the largest source of performance issues to the least):

1. filter
2. box-shadow
3. gradients

Try removing or reducing the number of your filters and box-shadows in particular and you should see a big performance improvement. Maybe us images instead for some of the effects. Or just drop them.

 

Past that, you'd need to do a more full performance review. Unfortunately that's out of scope for what we can do for free in these forums.

 

Happy tweening!

[balazs-d]

Thank you! I try it and will let you know if the solution is working. 

[balazs-d]

Unfortunately it didn't help! On some computers the animation is still laggy on others works as good as before. 

[ZachSaucier]

As I said above, you'll need to do a more full performance review. Unfortunately that's out of scope for what we can do for free in these forums.

[balazs-d]

How does that works? 

[ZachSaucier]

What do you mean? Anyone who can understand what's going on, knows how to use the developer tools, and spends the time to audit your website for performance issues can do a performance review.

[balazs-d]

Okay, I misunderstood you. 

I am networking on forums and hope to find someone soon. 

 

Thank you again!

[ZachSaucier]

Just now, balazs-d said:

I am networking on forums and hope to find someone soon. 

You're welcome to ask in our jobs forum.