Why is my framer motion h1 component offset in my React project?

Question

So I have a problem when using framer motion on h1

import { motion } from "framer-motion";
function FirstPage() {
  return (
    <motion.h1
      initial={{ opacity: 0, scale: 0.5, y: -100, x: -100 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{
        duration: 0.8,
        delay: 0.5,
        ease: [0, 0.71, 0.2, 1.01],
      }}
    >
      Tehauto
    </motion.h1>
  );
}

In css I center h1 and in animation I don't change x coordinate But for some reason it's offset to the right I don't know if this matters but I also installed bootloader

With framer motion (picture link)

When I use regular h1 (image link)

I tried deleting the entire header, then saving and rewriting it again, but no success

Answer 1

I will try my best to solve all your problems! !

It doesn't matter if bootstrap is installed (styles can be overridden just fine too).

The main thing is that you need to create a div and wrap it, and use inline styles in h1 and div. Like this you can do it:

//...
     <div
        style={{
          height: '0px',
          width: '100px',
          top: '200px',
          color: 'white',
          left: '40%',
          position: 'relative',
        }}
      >
        <motion.h1
          initial={{
            left: -30,
            position: 'relative',
            opacity: 0,
            scale: 0.5,
            y: -100,
          }}
          style={{
            fontSize: '80px',
            visibility: 'visible',
          }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{
            duration: 0.8,
            delay: 0.5,
            ease: [0, 0.71, 0.2, 1.01],
          }}
        >
          Tehauto
        </motion.h1>
      </div>
//...

The following is an updated Sample link.

You can mess with it.

Hope this helps!