Skip to content

Framer motion with disable javascript #1792

Answered by gianlucajahn
kaisiant asked this question in Q&A
Discussion options

You must be logged in to vote

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 s…

Replies: 4 comments 5 replies

Comment options

You must be logged in to vote
2 replies
@enjidev
Comment options

@dlackty
Comment options

Answer selected by kaisiant
Comment options

You must be logged in to vote
2 replies
@r1tsuu
Comment options

@augustosnk12
Comment options

Comment options

You must be logged in to vote
1 reply
@shwwwna
Comment options

Comment options

You must be logged in to vote
0 replies
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
None yet
10 participants