Interactions don't work with JavaScript turned off

Design help Animations & Interactions
1

Is there an easy way to implement backup behavior for interactions in browsers with disabled JavaScript? I’m using page load, page scrolled, and scroll into view interactions and none of those are working with disabled JavaScript which is making the website very inaccessible. I expected this would be handled by Webflow out-of-the-box.

Here is my public share link: https://preview.webflow.com/preview/digitalizace?utm_medium=preview_link&utm_source=designer&utm_content=digitalizace&preview=20239a619d63c8047c76166c5cbd1b0c&mode=preview

Published link: https://digitalizace.webflow.io/

2

Hey @adamkolmacka, you can install a <noscript>Your browser does not support JavaScript! Please enable javascript.</noscript>

I’m assuming you expect Webflow to default all elements to visible when javascript is disabled.

You can duplicate a page without interactions and have noscript visitor be redirected to that page with

<noscript>
  <meta http-equiv="refresh" content="0;url=noscript.html">
</noscript>

Source: javascript - Noscript to redirect (I need to redirect) - Stack Overflow

3

Thanks, @dennyhartanto, your answer helped me understand what I can do. Since I was looking for a clearer solution, I dug deeper and found out that I can target data-w-id attribute inside <noscript>. I used this to set opacity and transform to default values.

<noscript>
    <style>
        [data-w-id] {
            opacity: 1 !important;
            transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg) !important;
        }
    </style>
</noscript>
2 Likes