Gazzawazza

Hi - Im not sure how to code GSAP to stop causing a Cumulative Layout Shift (CLS) which is being flagged in the Chrome Lighthouse Audit - i.e not good for user experience.

I know when I set a div with GSAP to 0px height overriding its CSS height, it is causing the divs below it to then shift up into the space that was being occupied by the div before it was set to height: 0. Hence the Cumulative Layout Shift.

The div height in the css code cant be set to height: 0, it needs to be auto and then set by GSAP to height: '0'

I plan to use GSAP for my accordions, menu reveals etc but I keep causing a CLS which increases the more div reveals I add.

Can someone please help point me the right direction?

Much appreciated

Please click on the orange div to reveal hidden div. I have removed fonts from this example so there is no issue with CLS based on fonts loading. Hopefully that helps?
https://codepen.io/Gazzawazza/pen/OJmydXq