Is it possible to use Framer Motion in React with pug

I am using multiple technologies for my advanced React web page development I previously used AOS for animating my react components simply, also tried GreenSock once but it didn't fit my needs... I am using Next js and pug js in Next js through https://github.com/pugjs/babel-plugin-transform-react-pug

And want to use Framer motion for the same but motion.div changes to <motion className="div"> Could anyone please help me

Solution

In Next.js Application, go to .babelrc fil at the root(if not create one and add

{
  "plugins": [
    ["transform-jsx-classname-components", {
      "objects": ["motion"]
    }]
  ]
}

That's good, your final .babelrc should look as

{
  "presets": ["next/babel"],
  "plugins": [
    "transform-react-pug",
    [
      "transform-jsx-classname-components",
      {
        "objects": ["motion"]
      }
    ],
    "transform-react-jsx"
  ]
}

This is good to go for React's framer motion using pug And also please note : There is no syntax highlighting for the same as I tried over the time

.. In case of create-react-app please make sure to add the .babelrc contents in package.json after ejecting (npm eject), You will have a "babel" field in package.json, just add these plugins property inside that field..

Still this isn't the exact solution,

Now you will have to use motion.Div wherever you want animations instead of motion.div (i.e, uppercase)

Anyways this means that you cannot animate elements directy but you can animate elements, you will always need to use motion.Div or motion.Span...

Hope this Helps 😇

Edit: You could also add into import => as

Example import {motion as Motion } from 'framer-motion';

But you still have to use Motion.Div in pug