Search code examples
htmlcssreactjsframer-motion

Framer Motion: Animation causes website to expand

I've experienced very strange behavior with the website size.

  • On mobile, the website appears bigger than its content (and its html & body elements)
  • There is no overflow happening (or at least I found none)
  • When I hover with my mouse over the React Developer Tools extension, it corrects itself and the website has now the correct size (which is the size of the screen)

Links:

A link to a screen recording

A link to the GitHub repository - feel free to fork it

I've deployed the site to GitHub Pages - the bug didn't get away.

A link to the GitHub Pages site

The bug will only appear when:

  • You don't resize the page to mobile size. You have to load it in mobile size.
  • You use a real mobile device or the mobile device emulator of the browser. It won't appear without that.

Note that everything will get pretty big and oversized after resizing and refreshing the page two to three times with the "responsive" device option in the mobile device emulator. But the oversizing doesn't change the size of the elements, they are still sized to fit perfectly in the window. It's just somehow scaled up.

This is what this looks like...

Everything will then turn normal again after the mobile device emulator gets closed.

Maybe this scale issue is a completely different problem. (it doesn't get corrected by hovering over the React Devtools)

Maybe you will suspect these background circle shadows, but I've tried commenting them out - nothing changed.

This bug appears on Chrome (Chrome for Windows: version 92.0.4515.159 / Mobile: same version) and MS Edge (version 92.0.902.78). I haven't tested other browsers.

Apart from React, I am using Tailwind CSS, react-router, and framer-motion.

Solution

  • This problem was caused by Framer-Motion. The Home component is animated with these variants:

    const homeVariants = {
    initial: {
      x: "110vw",
      opacity: 0.5,
    },
    animate: {
      x: 0,
      opacity: 1,
      transition: {
        duration: 1,
        ease: "easeOut",
      },
    },
    exit: {
      x: "-110vw",
      opacity: 0.5,
      transition: {
        duration: 1,
        ease: "easeIn",
      },
    },
  };

    So when it initially slides in from the right, it is causing the website to expand. I've added overflow-x: hidden; to the body, but that is not enough, as explained here.

    To fix this, I added overflow-x: hidden; to both html and body and position: relative; on the body tag.

    html,
body {
  background: #130f40;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  position: relative;
}