Aos: Script for Wordpress

Created on 18 Apr 2017 · 14Comments · Source: michalsnik/aos

No Animation in Wp
I think the problem is the script

Source

Ricco-S

Most helpful comment

For anyone else having this issue if you're developing theme's using a shell theme like html5blank make sure you remove no-js from <html class="no-js"> as adding no-js stops the animation from working. no-js is used for displaying websites differently for people who do not have JS enabled and this class is also used in the aos to stop animations from working.

helloromero on 19 Nov 2018

👍2 🚀1

All 14 comments

I just used this in a WP project. Make sure after you load the JS and CSS you add.

It should work just fine.

wkjones on 22 Apr 2017

It works like a charm in Wordpress, definitely you're doing something wrong.

netes on 27 Apr 2017

Agreed I utilize this library in Wordpress as well. Check your cdn scripts and links.

mmason33 on 27 Jun 2017

I'm closing this issue. It looks like it's not a problem with AOS itself. I'm glad it works for you guys :)

michalsnik on 7 Jul 2017

I am having this issue. I use it all the time in none WP projects but for some reason it just doesn't work in WP. The classes aos-init aos-animate are added on the elements but nothing happens. Super weird.

helloromero on 16 Nov 2018

helloromero on 19 Nov 2018

👍2 🚀1

For anyone else having this issue if you're developing theme's using a shell theme like html5blank make sure you remove no-js from <html class="no-js"> as adding no-js stops the animation from working. no-js is used for displaying websites differently for people who do not have JS enabled and this class is also used in the aos to stop animations from working.

You saved my day!! thank you

latheeshvmv on 25 Nov 2018

@helloromero -- oh my word, you saved my day. I was having such an annoying time with this! And this was exactly the cause.

Why does AOS have a dependency on Modernizr??!?!?

https://stackoverflow.com/questions/6724515/what-is-the-purpose-of-the-html-no-js-class

ortonomy on 16 Oct 2019

@ortonomy It's not a dependency on Modernizr, it prevents invisible elements when JS is disabled. The class is used to detect whether or not JS is enabled, and whichever theme you're using should convert the root class to js on load.

joshangehr on 16 Oct 2019

@joshangehr - I know what and how the ‘no-js’ / ‘js’ classes are used, Modernizr or WP dependency, doesn’t matter, it’s still a dependency on an (arguably anachronistic) non-standard way of deciding whether to apply the animations or not.

I’m not sure it has a place in AoS.

ortonomy on 16 Oct 2019

But in this case it's not "deciding whether to apply the animations or not", it's integrating a common pattern to _prevent_ the elements rendering invisible when JS in unavailable: this way the page content is still readable and indexable by search engines.

The only reason it has a place in AOS is because of how often it's been discussed. I do agree that it should be outlined in the documentation a bit better, but if a framework adds a no-js class to the root element without replacing it, this seems like a failure on the part of the framework.

The noscript approach linked above works just as well if you'd rather go that route, considering @next is still in beta. I'm still using this on most builds.

All this said though, I do wonder if the no-js class is the best approach. Maybe it's something that should happen by default in the AOS.init() initialization.

joshangehr on 17 Oct 2019

@joshangehr -- got it. Yes, my intimated reason for existence was incorrect, but my objection still stands. no-js js creates a tightly-coupled dependency on something that is not really standard (despite being once widespread and slowly forgotten and arguably even unnecessary. (very very few devices will have JS turned off except of course for search engine indexes (although many of them now use and execute JS environment.). We really really shouldn't be relying on some other framework or lib to 'enable' to add or replace classes that can break this lib.

As far as I can tell, no-js is something that was implemented almost exclusively by modernizr as part of its feature detection lib. (which is included in WP + themes)

I do agree that it should be outlined in the documentation a bit better

not just documented but left up to the user to decide if they want this particular feature

If you want to maximise SEO friendliness, make sure to load your page with a no-js class on the html tag. This way, AOS will not hide any elements tagged as animatable when visited by web crawlers and bots, or in environments where JS is not available.

Or even better, don't mix AOS at ALL with some other external libs feature detection.

If you want to maximise SEO friendliness, make sure to load your page with a no-aos class on the html tag. This way, AOS will not hide any elements tagged as animatable when visited by web crawlers and bots, or in environments where JS is not available. Ensure your custom scripts remove the no-aos class or the AOS animations will not run. NB: The no-aos class can be put on any ancestor element that you wish to SEO optimize. Remember to remove it to make sure AOS CSS can be applied.

ortonomy on 17 Oct 2019

For anyone else having this issue if you're developing theme's using a shell theme like html5blank make sure you remove no-js from <html class="no-js"> as adding no-js stops the animation from working. no-js is used for displaying websites differently for people who do not have JS enabled and this class is also used in the aos to stop animations from working.

This also saved my day. Thought at first, here goes another day debugging an issue which is working absolutely fine in a non-WP (HTML) Theme.