Framer Motion text gets distorted when animating with shared layouts

user_11647219 0
Viewed 1314

I am in a Next.js enviornment and have wrapped my _app.js with .

Inside a page I have a basic routing set up to jump from page 1 to page 2.

On each page I have a motion h1 which looks like. So there are two components with matching ID's.


const stats = {
  visible: {
    opacity: 1,
  },
  hidden: {
    opacity: 1,
  },
  exit: {
    opacity: 0,
    y: 50,
  },
}

      <motion.h1
        initial="hidden"
        animate="visible"
        variants={stats}
        layout
        className="text-3xl text-gray-800 font-bold"
        layoutId={`product-title-${data.title}`}
      >
        {data.title}
      </motion.h1>

When I navigate pages the elements animate from their counter parts previous position.. but the text gets all distorted when animating.

How do I fix the distorted text?

framer-motion
1 Answers

You can try giving the value of "position" to your layout prop, instead of true.

layout="position"

As referred in the framer motion documentation

If layout is set to "position", the size of the component will change instantly and only its position will animate.

Since you are animating only position and opacity, it could solve your issue.

user_155302210
Related