Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

AOS does not work when JS is disabled #722

Open
marekka opened this issue Oct 18, 2021 · 9 comments
Open

AOS does not work when JS is disabled #722

marekka opened this issue Oct 18, 2021 · 9 comments

Comments

@marekka
Copy link

marekka commented Oct 18, 2021

Hi, AOS does not work when JS is disabled, think it's a major issue!

Are you going to fix this?
@MikeyJN
Copy link

MikeyJN commented Oct 26, 2021

Considering the plug-in relies on JS to detect when elements are moving in and out of the viewport, I think you'd have a tough time to 'fix' it without it lol

Throw in the fact that 95%+ of websites use JS in one way or another I'd struggle to think of a reason why anyone would ever want to disable JS in the first place?!

@marekka
Copy link
Author

marekka commented Nov 4, 2021 via email

@scriptex
Copy link

You can always implement this yourself. I agree with what @MikeyJN said and it really should be out of the scope of any JS library to provide support for users with disabled JS.

What you can do is:

  1. Conditionally load the CSS for AOS with JS.
  2. Add a classname to your <body> or <html> tag and then tell the CSS to show all [data-aos] elements when this classname is present. then remove the classname with JS.
  3. Anything else which you find suitable for your use case, library, framework, etc. The possibilities are endless.

@Vuurvos1
Copy link

While going through the project recently I found this line of scss which checks if a .no-js class is present on the html element, so the author did think of users without js enabled.
But to take advantage of this you would need to remove this class inside your own javascript.

A better solution could be for the library to add a custom class to the html once it initializes which the styles then could reference.

@marekka
Copy link
Author

marekka commented Jan 24, 2022

Have to be something legacy.... I have analysed CSS files connected to the demo:

https://michalsnik.github.io/aos/

And they do not have any references to no-js......

@mauro-balades
Copy link

they can't fix it since the library relies on js. What I suggest is to use a <noscript> tag to tell the user to allow JS...

@domdomegg
Copy link

If you want things to display as default if the user doesn't have JavaScript enabled, you can use the following snippets:

You can add this to your HTML:

<noscript>
  <style>[data-aos] { opacity: 1 !important; transform: none !important; }</style>
</noscript>

Or, in JSX/TSX (React):

<noscript>
  <style>{"[data-aos] { opacity: 1 !important; transform: none !important; }"}</style>
</noscript>

@marekka
Copy link
Author

marekka commented Apr 26, 2022

THANKS!

@seppebeelprez
Copy link

I tried the way but Google still says there's something that eliminates render-blocking resources.

What did work is adding a class for exampla "no-js" to the html tag and removing it with a inline script right after the body tag. Removing the no-js class with jQuery won't work as I'm still getting that render-blocking error.

  • So default I added "no-js" to the html tag
  • Right after the body tag you can include this: <script> document.querySelector('html').classList.remove('no-js'); </script>
  • And this is what I added as css to the html tag: html { &.no-js { [data-aos] { opacity: 1 !important; transform: none !important; } } }

I'm not sure why the tag doesn't work with Google because it definitely works if I disable javascript in Firefox.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@scriptex @domdomegg @marekka @Vuurvos1 @MikeyJN @mauro-balades @seppebeelprez