mciastek / sal

🚀 Performance focused, lightweight scroll animation library 🚀
https://mciastek.github.io/sal/
MIT License
3.6k stars 179 forks source link

The default timing function causes the CLS score to drop significantly in Lighthouse #87

Open meherhowji opened 3 years ago

meherhowji commented 3 years ago

While I was running lighthouse on my website, I noticed that not providing explicit timing function caused:

Avoid non-composited animations section to capture all the animations without timing function as Effect has unsupported timing parameters

Providing explicit data-sal-easing attribute, fixes this. I was wondering if there is a particular you see this getting solved, I can create a PR and help.


Reference:

Rendered CSS when using implicit easing function:

[data-sal] {
    transition-timing-function: ease;
    transition-timing-function: var(--sal-easing,ease); // this causes CLS issue in Lighthouse
}

Rendered CSS when using explicit easing function:

[data-sal][data-sal-easing=ease] {
    transition-timing-function: ease; // this doesn't get caught in CLS audit in Lighthouse
}