Javascript animation fallback

Question

I'm using the following script for entrance animations in a project: www.justinaguilar.com/animations/

My concern is that this entrance animations rely on "visibility: hidden" property in CSS in order to work. I'm afraid that if JavaScript or CSS aren't available or don't work properly on the user end, the content wont be displayed at all.

Should I be concerned about this? Is there a better alternative or some fallback plan I could implement?

Thanks.

if it really is a concern you should add the class that provides the `visibility: hidden` via js — David Fregoli, Jan 21 '15 at 12:12
Personally, I think that someone who disables JS can't use the Internet these days. — Everton Lenger, Jan 21 '15 at 12:27
@DavidFregoli Do you think that would be safer then apllying it via CSS? — David Martins, Jan 21 '15 at 16:51
@EvertonLenger Maybe my concern is unjustified... Would be nice to have some numbers though... — David Martins, Jan 21 '15 at 17:01

score 1 · Accepted Answer · edited May 23 '17 at 11:50

I think about that in this way.

If this is your only problem about JS disabled, or if you have just a little JS in your page, maybe it is worth find a way to fix it (probably turn the animations off and making the site a little "uglier"). In that way, you're providing access for everyone (and that was a good concept).

But, personally, I've never cared about that. All websites that I've developed contains a lot of JS (with Ajax calls, for instance), it'd imply in a lot of (unnecessary, in my opinion) work for making them functional without JS.

Searching about it, I've read this question. In 2010, 0.25% of the users in Brazil (country where I live) had JS disabled in their browsers. This number should be even less these days. And honestly, I have better things to do with my time instead of caring about these people.

In short terms, my opinion is: if you just use JS a little (or if it's really necessary make this site work without JS), fix it. In all other cases, forget about that and focus on what really matters.

EDIT:

If you wanna guarantee the content will be displayed, you can hide the element via JS. In this way, the element will only be hidden when CSS and JS are on.

<div class="element-to-hide" style="visibility:visible;"></div>

<style type="text/css">
    .hide {
        visibility: hidden;
    }
</style>

<script>
    $('.element-to-hide').addClass('hide');
</script>

I think you make a good point. I'm just not quite aware of how widely spread is the use of CSS and JS in terms of different devices and software. I could live with 5% of users being left out but 25% or even 20% seams like a big chare of audience to be dismissed... I use JS regularly but in this case the content simply wont be displayed at all if JS or CSS aren't available... — David Martins, Jan 21 '15 at 16:29
This number will never be 20%, the average should be in 1%. As I said, this number was 0.25% in Brazil 4 years ago (according to Yahoo research). But if you wanna guarantee the content will be displayed, see my update. :) — Everton Lenger, Jan 21 '15 at 17:03
Everton, you rock! That's exactly what I wanted. Works like a charm and I don't need to worry about the content not being displayed. Unfortunatly my knolage of JS is preaty much limited to copy-paste so I wouldn't know how to do that my self. You made my day. Thanks a lot. — David Martins, Jan 21 '15 at 17:21
I've updated my answer again, in case you wanna guarantee CSS disabled too. Very glad that helped! :) — Everton Lenger, Jan 21 '15 at 17:29

Javascript animation fallback

1 Answers1