Framer motion with disable javascript

[kaisiant]

I am using framer motion on nextjs and build it as static site.
All looks good till I disable the javascript on the page (using Quick Javascript Switcher chrome extension).
The page loaded in a white page, inspect the elements, mostly are in opacity 0.

My question is there any way to configure on framer motion to display the content directly if javascript is disabled on the page?

Example website: https://go-tailwind.preview.uideck.com/
This site looks good even with disabled javascript.

[gianlucajahn]

You can use the fallbackStyle property of the Framer Motion animate component to specify styles that will be applied to the component if JavaScript is disabled. These styles will be applied directly to the element, so the animation will not run, but the element will still be visible on the page. Here is an example of how to use the fallbackStyle property:

import { motion } from "framer-motion";

const Component = () => {
  return (
    <motion.div
      animate={{ opacity: 1 }}
      transition={{ duration: 1 }}
      fallbackStyle={{ opacity: 1 }}
    >
      This content will be visible even if JavaScript is disabled.
    </motion.div>
  );
};

You can also use the initial property to specify the starting styles for the element, which will be applied directly to the element if JavaScript is disabled. This can be useful for ensuring that the element is visible and in the correct position on the page even if the animation does not run. Here is an example of how to use the initial property:

import { motion } from "framer-motion";

const Component = () => {
  return (
    <motion.div
      animate={{ opacity: 1 }}
      transition={{ duration: 1 }}
      initial={{ opacity: 0 }}
    >
      This content will be visible even if JavaScript is disabled.
    </motion.div>
  );
};

I hope this helps!

[enjidev]

I have used framer-motion@7.10.2, but when I use fallbackStyle={animation.show} in my code, it gives me an error stating that the property doesn't exist.

I tried to ignore the error using @ts-ignore, but the build resulted in the same outcome: the element is hidden when JavaScript is disabled.

Using your second approach seems to yield the same result.

const animation = {
  hide: { x: -32, opacity: 0 },
  show: {
    x: 0,
    opacity: 1,
  },
};

<m.div
  initial={animation.hide}
  animate={animation.show}
  transition={{ delay: 0 }}
  fallbackStyle={animation.show}
>
  {/** ... */}
</m.div>

I have tried using both m and motion components, but I get the same result. Am I missing something?

[dlackty]

I can confirm that this doesn't work too. fallbackStyle is never present at this code repo anywhere else.

[luiferg]

Hi guys, in case that in 2023 someone still have this problem here is how I manage it:

I declare a constant to see if JS is enabled: const isJavaScriptEnabled = typeof window !== 'undefined'

Then I use it to see what kind of initial state apply:

<motion.div
   initial={
     isJavaScriptEnabled
       ? { opacity: 0, scale: 0.9 }
       : { opacity: 1, scale: 1 }
   }
   animate={ { opacity: 1, scale: 1 } }
>
    {/* ... content here... */}
</motion.div>

Hope this worked and if someone found another better solution please let us know!
Cheers!

[r1tsuu]

It will work if your components are no SSR, but in SSR you also have window undefined?

[augustosnk12]

same question

[kimgiutae]

Hi ppl. As users pointed out above, the fallbackStyle prop is deprecated. So the selected answer above is also wrong.

This is my current (not so elegant) solution to this: Add a class to the motion component, like this: <motion.div className="motion" />, and later in your HTML add a <noscript /> tag with a fallback style:

<noscript>
  <style>
    .motion { opacity: 1 !important }
  </style>
</noscript>

This is working fine to me. And no problems with SSR.

Obs: Full respect for libs authors, but majority of JS libs doesn't offer a solution/little-guide for NO-JS situations. That is kinda sad, cause there are a lot of situations where this is important. We expect good web apps works even without JS, at least a limited experience (Optimistic UX). We are not talking about ancient browsers, just plain modern HTML/CSS. Sorry for the little rant, thanks for all the good work guys.

[shwwwna]

In Next.js 14 App Router, in layout.tsx I added

        <noscript
          dangerouslySetInnerHTML={{
            __html: `
      <style>
        .motion { opacity: 1 !important }
      </style>
    `,
          }}
        />

and motion className in my motion.div and other elements

[marijoo]

Why was fallbackStyle even deprecated? Seems reasonable to me to have the possibility to style for users without JavaScript – especially for SSG pages.

The solution by kimgiutae is working, but is pretty verbose especially if there are a lot of different animations animating different properties beyond opacity.