Optimizing scrollTriggered cards animation

[Mando]

hi guys i created this little cards animation using GSAP ScrollTrigger plugin but i noticed some lag on less powerfull devices, is there a way to optimize my code? i'm a bit new to GSAP😊

i'll leave the codepen below

 

it's not scaling the way it does on the browser but trust me it does😂

See the Pen dyeMaWW by STR4NG3R (@STR4NG3R) on CodePen

[Cassie]

The most performant properties to animate are opacity and transforms. Box shadow is going to cause issues.

 

Good luck!

[Mando]

16 minutes ago, Cassie said:

The most performant properties to animate are opacity and transforms. Box shadow is going to cause issues.

 

Good luck!

hi, thankyou for responding! i didn't actually know that 😊, and what about the scrollTrigger instances that i'm creating into the forEach? do they impact on the performance? and is there a way not to create one of it for each card?

[Cassie]

No, that doesn't matter really.  What I'm talking about is rendering performance. This is a good article

https://web.dev/rendering-performance/