Fredy31 Posted May 11, 2021 Share Posted May 11, 2021 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 Link to comment Share on other sites More sharing options...
GreenSock Posted May 11, 2021 Share Posted May 11, 2021 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! Link to comment Share on other sites More sharing options...
Fredy31 Posted May 12, 2021 Author Share Posted May 12, 2021 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? Link to comment Share on other sites More sharing options...
OSUblake Posted May 12, 2021 Share Posted May 12, 2021 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now