aos
aos copied to clipboard
michalsnik
AOS does not work when JS is disabled
Hi, AOS does not work when JS is disabled, think it's a major issue!
Are you going to fix this?
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?!
Well, IMO, there should be code snippets to satisfy no-js browsers and have the AOS section always visible onload
Z wyrazami szacunku Marek Kaczanowicz
[image: Mailtrack] https://mailtrack.io?utm_source=gmail&utm_medium=signature&utm_campaign=signaturevirality11& Sender notified by Mailtrack https://mailtrack.io?utm_source=gmail&utm_medium=signature&utm_campaign=signaturevirality11& 04.11.21, 21:24:02
wt., 2 lis 2021 o 04:29 Webster Chak @.***> napisał(a):
I don't think it will work without JS (Javascript). In fact, this is a JS Library which, as it named, would require JS enabled (very common) to work. Without it, it'd be like expecting a car to move itself without engine!
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/michalsnik/aos/issues/722#issuecomment-957069030, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABS5GLLTHJGR2JBJZDXVUTTUJ5LJVANCNFSM5GGFO4NQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.
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:
- Conditionally load the CSS for AOS with JS.
- 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. - Anything else which you find suitable for your use case, library, framework, etc. The possibilities are endless.
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.
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......
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...
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>
I tried the
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
