m4g1c14n Posted January 13, 2023 Share Posted January 13, 2023 I forked this pen from GSAP Infinite Scrolling Text, and just simply generate a 10 more random row, and when I render them, I can see that my CPU is really2 high Is there anything that I should know about, this animation should be quite light right //Change this to 30 to see the CPU is crying :( const total_text = 10; I left one row for you guys to inspect, later I will generate all Scrolling Text programmatically This is not the final form of the animation, I am planning to make a 3D Steps comprised of these text, and use them to fully close a section and then fully reveal another section ( sort of a full page transition ), and if this kind of animation is taxing the CPU this much, I might not be able to continue with my design plan Please help See the Pen ExpXErR by m4g1c14n (@m4g1c14n) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted January 13, 2023 Share Posted January 13, 2023 Performance optimization is a deep topic. I don't see anything super obvious but you might want to try setting will-change: transform on the moving elements to optimize rendering performance in some browsers. Does that make a difference for you? On my computer, I didn't really see any CPU problems. It can also help to set pointer-events: none on things that you don't really need to be clickable/interactive. In 99.9% of the cases I've seen, performance problems are completely unrelated to GSAP. It's almost always a graphics rendering thing. If you're pushing a lot of pixels around the screen, especially if there's a large area that changes on each tick, you're asking a lot of the browser's graphics rendering routines. You could try switching to canvas/WebGL for rendering. Good luck and let us know if you've got any GSAP-specific questions. We're happy to help with those. 2 Link to comment Share on other sites More sharing options...
Solution m4g1c14n Posted January 14, 2023 Author Solution Share Posted January 14, 2023 Thanks for the information, I fixed it by adding style will-change: transform; into the element that will be transformed, before even with 10 iteration, my macbook pro 16 m1 reached 30% cpu and for 30 iteration reached 50% cpu with this style applied, I can run 50 iteration animation and the CPU hover around 7-8% 😃 Check the new pen See the Pen QWBgJEw by m4g1c14n (@m4g1c14n) on CodePen 2 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