CPU Taxing GSAP Infinite Scrolling Text

[m4g1c14n]

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

[GreenSock]

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. 

[m4g1c14n]

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