Search code examples
javascriptreactjsnext.jsframer-motion

Using Framer Motion in React class components (non-functional)

I have a simple animation with Framer Motion that works perfectly on functional component but doesn't work on class component
I am new to Framer Motion and That is my react code =>

import {motion} from 'framer-motion'

class Sidebar extends React.Component {
  constructor (props) {
    super(props)
  }

  render (){
    return (
      <>
        <motion.section
          inital={{ width: 0, height: 0, opacity: 0 }}
          animate={{ width: "100%", height: "100%", opacity: 1 }}>
       
        </motion.section>
      </>
    )
  }
}

export default Sidebar
Solution

  • You have a typo in your code, inital should be initial (missing i after t). Besides that your code is fully functional and framer motion works same with class components as it does with functional (but of course you can't use hooks from framer motion in class components)