Next.js Discord

Discord Forum

Add custom CSS when JavaScript is disabled on a user's browser

Unanswered
epickeyz posted this in #help-forum
Open in Discord
Greetings to the Next.js community,

I'm currently working on a captivating project utilizing Next.js, Typescript, and GSAP for scroll-triggered .fromTo animations. To address the issue of Flashing of Unstyled Components, I have set the default opacity of the elements I animate to 0. However, I've encountered a challenge when JavaScript is disabled on a user's browser. All those elements remain hidden by opacity: 0. In such cases, I need to dynamically modify the CSS when JS is disabled on the user's side.

While I'm aware of the <noscript> tag's potential, I'm uncertain about its implementation within the Next.js framework. I would be immensely grateful for any insights, suggestions, or techniques you can share to help me handle this situation effectively in Next.js. Thank you for your valuable support!

0 Replies