Jump to content
Search Community

Gsap animation laggy when the same css animation works smoothly

romain.gr test
Moderator Tag

Recommended Posts

Hi,

 

I made 2 typographic experiments, one using GSAP (because I want the use the new stagger stuff from gsap3) and a similar version in css, It looks smooth in css at least smoother but the version with gsap is super slow and laggy. Does someone have a little idea of the reason?

 

GSAP version:

 

 

CSS Version

 

See the Pen LYEEymZ?editors=0010 by romaingranai (@romaingranai) on CodePen

 

Thank you

 

 

See the Pen NWPpVKv?editors=0010 by romaingranai (@romaingranai) on CodePen

Link to comment
Share on other sites

Hey Romain. After a bit of testing, there are several things that could be improved:

  1. The main performance hit that the JS version has from what I can tell is nothing related to the JS or GSAP - it's related to the difference in font size. You have font-size: 75vh; line-height: 110%; in the CSS version while you have font-size: 30vw; in the CSS version. Making the CSS version match the JS version's properties makes the CSS lag noticeably on my computer. Even just removing the line-height significantly increased performance. But there are some other places for improvement as well:
  2. Adding backface-visibility: hidden; improves performance.

    Not related to the animation:
  3. Remove the unnecessary calc()s. You're using JS already - no point in using calc, just pass the calculated value. Notice also that I used the `` format which is more convenient for adding variables to strings. 
  4. You can reduce the load intensity by appending all of your elements with their styles at one time (batching them together).
  5. Drop jQuery :) 

See the Pen poJwMMO?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Overall you're just asking a lot of the browser. This sort of animation would be much more performant in Canvas or WebGL. For example:

See the Pen dyyMbGW by p5aholic (@p5aholic) on CodePen

  • Like 2
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.
×
×
  • Create New...