Animations seem choppy

[Fredy31]

I've been working on animations on my website and everything seems choppy AF.

 

I'm using GSAP v3 and ScrollTrigger. 

 

All my animations are basic transform and opacity (autoAlpha). The choppyness seems to come and go.

 

So is there some known beginner errors that provoke a choppyness like this? This is my first GSAP website.

 

Here is the staging: http://bsm.pixelcircusclient.com/

 

Joined is the JS that runs the animations seen on the website. I spent a full day to try and figure what is provoking the choppiness seen.

animation.js

[GreenSock]

Welcome to the forums, @Fredy31. Sorry to hear about the trouble. 

 

Performance audits are very time-intensive and optimization is a wide/deep topic. You've got a lot going on there. These forums are intended for GSAP-specific questions - we just don't have the resources to provide free performance audits and consulting but if you have a GSAP question we'd be happy to help, especially if you provide a minimal demo. Otherwise, we do offer paid consulting services (though we don't really advertise them because our time is in high-demand and there's limited availability). You could post in the "Jobs & Freelance" forum too in order to see if someone else could help. 

 

I will say for sure that this is not best for performance: 

transform:'translate(-150%, -50%) rotate(90deg)',

I'd strongly recommend using GSAP's special aliases for transform components:

xPercent: -150,
yPercent: -50,
rotation: 90

It's faster (values can be cached) and more accurate.

 

Be careful about using calc() too, as I don't think it's great for performance: 

// not great:
transform: 'translate(-50%,calc(-50% + 100px))'

I'm talking about the browser's performance, not GSAP. 

 

For what it's worth, 99.9% of the time, performance issues have absolutely nothing to do with GSAP - it's all about browser graphics rendering. Minimize the number of pixels changing, animate properties that don't affect layout (transforms, opacity), and avoid filters/shadows at all costs (they're very expensive).

 

Good luck!

[Fredy31]

Okay I've switched my transforms.

 

But really I can't seem to figure out what is choking my animations. 

 

And good tools you would recommend to figure out where the browser's GPU is having a hard time?

[OSUblake]

You should use your browser's built in profiling tools.

 

Start with figuring how to minimize layout shifts. I see a bunch...

 

 

Using will-change: transform in your css on elements that you animate can also help, but can also hurt if you overuse it.