animation is laggy, page is slow

[Caroline_Portugal]

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

[PointC]

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.

 

[Caroline_Portugal]

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

[GreenSock]

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? 

[Caroline_Portugal]

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