Jump to content
GreenSock

Caroline_Portugal

animation is laggy, page is slow

Go to solution Solved by PointC,

Recommended Posts

Hi, 

 

I've animated this design in CodePen () but when I use this code on a one-page website (no pictures, just text), the animation is laggy, will flicker sometimes, and will freeze the page for a second when I try to scroll down through it. 

 

What should I look into for optimizing this animation? I really want to use it, but don't think I can in this state. 

 

Thanks so much for any suggestions, 

 

Caroline

 

 

See the Pen BapBerO by carolineportugal (@carolineportugal) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @Caroline_Portugal :)

 

It looks fine to me, but have you tried the slight rotation trick? rotation: 0.01 on your tweens?

 

Just an FYI - you can set a default ease and duration since they are all the same.

gsap.defaults({
  ease: "none",
  duration: 50
});

The duration should also be in the vars in GSAP 3. You can also use the set() method instead of those zero duration tweens.

https://greensock.com/docs/v3/GSAP/gsap.set()

 

Please see if the rotation trick changes anything for you. Others may jump in with additional ideas.

 

Happy tweening.

:)

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Hey PointC, thanks so much for these tips. It looks like the slight rotation did the trick, not sure why.  😘

Link to comment
Share on other sites

3 hours ago, Caroline_Portugal said:

It looks like the slight rotation did the trick, not sure why. 

Some browsers try to "help" by pixel-snapping, but if your element is rotated/skewed it prevents all the pixels from lining up in perfect rows/columns in the way that the browser thinks is safe to do that snapping with the screen pixels. It's totally unrelated to GSAP - it's the browser deciding to render things in a particular way. Annoying, right? 

  • Like 2
Link to comment
Share on other sites

Thanks for all these explanations—all very useful. You guys are the best. 

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