topic CLS issues related to AOS (Animate on Scroll) in CMS Development

CLS issues related to AOS (Animate on Scroll)

mkw252 — Mon, 29 Jan 2024 20:36:00 GMT

Hello,

I created a new site using the "Drive Theme Free " template. The site is really basic, but it received a mediocre CLS rating from Google, even on the bare-bones pages such as our Privacy Policy with merely the header and one body content section. PageSpeed Insights believes that this line of code is causing the issue:

I tried using fixed image dimensions and removing "animate on scroll" for all image elements, but it didn't fix the issue. And since Google detects this issue on basic pages with hardly any visual elements, I'm stumped. I opened up the Template editor and couldn't find this code anywhere.

How do I fix this? Thank you in advance!

Re: CLS issues related to AOS (Animate on Scroll)

Jnix284 — Tue, 30 Jan 2024 01:14:14 GMT

@mkw252 would you mind sharing a look so I can review the code directly to see where it's coming from?

Can you also verify where in the theme settings and/or module settings you've removed AOS?

Re: CLS issues related to AOS (Animate on Scroll)

mkw252 — Tue, 30 Jan 2024 15:43:09 GMT

Hi Jennifer, thank you for looking into it. Here's the website URL: gonative.ai.

I couldn't find the line of code when I navigated to Page Settings -> Template -> Edit this Template.
In the drag-and-drop modules, I unchecked "animate on scroll" from all of the assets on the page.

When that didn't solve the problem either, I reverted back to the original settings until I can identify a solution.

Thank you so much for your help!

Re: CLS issues related to AOS (Animate on Scroll)

Jnix284 — Tue, 30 Jan 2024 16:51:42 GMT

You're welcome @mkw252, thanks for the URL, makes it a lot easier to help get to the bottom of it.

I found the code for AOS, it's part of the body code directly as PageSpeed Insights has flagged:

I was going to download the theme to see where it's controlling AOS, but it's no longer available in the marketplace.

Even though you've turned it off in all of the modules, there are some animations with the images (the split text/image layouts) where I can see it using AOS.

I don't know if it would remove the extra line at the top if all of the AOS were disabled, it's hard to know how the developer has the theme coded.

This is the support email, perhaps the developer can point you in the right direction for turning off AOS globally: support@driveagency.co

Let me know if they can't help and we can dig further into the coded files to see about removing it globally.