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

Question

So i have a problem when i use framer motion on my 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 this h1 and in the animation i do not change the x coordinate but for some reason it is offset to the right Idk if it matters but i have bootstrap installed also

with framer motion (picture link)

when i use regular h1 (picture link)

I tried to delete the entire heading and then save and then rewrite it again but it didnt work

Answer 1

I tried to solve your all issues!!

Idk if it matters but I have bootstrap installed also

It doesn't matter whether you have installed bootstrap(styling can also be overridden well).

The main thing is that you need to create div & wrap it, also use inline styling in both h1 & 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>
//...

Here is the update example link.

You can mess around with it.

I hope this helps!