Can CSS box-shadow cause poor performance with GSAP? Case: infinite slider

[bleep]

Hi, Merry Christmas 🎄 I'm working on an horizontal slider loop

 

I'm using this slider loop on an app I'm working on, the codepen is the same as on my app except that I have different images for each card.

I notice that if I keep box-shadows on the cards, the performance is bad. When I scroll on the page, it's super laggy.

When I kill the shadows, it works normally.

 

Question 1 : have you noticed bad performances because of box-shadows in the past?

Question 2 : is the loop/drag method with an Observer in the codepen not well optimized? Would you recommend it?

Question 3 : on this codepen, each card has 3 DOM levels (li, image container, and image), can this amount of levels be a problem on loops?

 

It's likely that my app isn't sufficiently optimized and the box-shadows is kind of the last straw for it, so I'll probably need to do optimization on other things anyway. Although, if I kill other sections that are performance eaters in my app, it's still laggy if the box-shadows are here..

 

Thank you

 

Codepen is based on a codepen found on this forum topic
Config: AMD Ryzen 9 7950X, 64GB ram, GTX 1080TI, Chrome

 

See the Pen ZEPYLOm by bleepbleep (@bleepbleep) on CodePen

[GreenSock]

Yeah, filters are notoriously bad for performance rendering-wise and that includes box-shadow. It has absolutely nothing to do with GSAP - it's just a browser thing. You can try setting will-change: transform on the affected elements, or you could maybe apply that shadow to the image artwork itself, like in Photoshop so that you're not forcing the browser to do all that work dynamically. The performance issue is almost surely NOT related to the helper function either. 

[bleep]

Thanks! Good to know

will-change: transform seems to make me gain ~20% Gpu memory. Interesting 🤓

 

Shocked that box-shadows are that difficult to handle for browsers
I'll also consider bitmap shadows