How to remove page animations without affecting CLS

[webkompaanParticipant]

I have been puzzling to get my (modified) Genesis Sample theme to pass Googles CLS (through Lighthouse). It kept saying there was a large cls happening on the site-inner div. Finally I found that removing the css that I added to stop the fade-in fade-out loading of pages and content was causing this. I have no idea why this was affecting the cls.

.site-container {
animation: none;
}

But I don't like that animation/transition stuff in websites 😉 so any suggestion would be helpful how to remove it anyway.

Thanks!

Jack

https://www.jacktummers.nl/

[LanceHillierParticipant]

Hi Jack,

I realise this post is a few months old but if you look for this code in the themes `style.css' file you can either delete or modify to something you like.

/* Site Container
--------------------------------------------- */

.site-container {
	animation: fadein .25s;
	word-wrap: break-word;
}

@keyframes fadein {

	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}

}

This is taken from a theme I am working on so the values might be slightly different, I usually just delete the @keyframes fadein and set the animation: fadein .25s; to a value I like.

Cheers,
Lance.

[Author]

Posts