Any way to force framer motion to use width instead of transforms?

Question

When I use css to animate the width of a div, it looks neat. The animation is nicely controlled and everything. But with framer motion my animation has glitches sometimes. And I'm pretty sure that it's because it uses transforms. So i'm wondering if there's a way I can ask framer motion to only manipulate the width property and nothing else...?

Answer 1

Yes, you can animate many properties that aren't mentioned a lot in the docs.

  <MotionBox
    animate={{
      height: isBig ? 150 : 100,
      width: isBig ? 150 : 100
    }}
  />

The reason they don't push animating width and height can be explained here

TLDR: animating width and height cause reflow which is CPU intensive, while transform properties don't cause reflow and are optimized by your GPU, so transform properties are favored.

I made a working code sandbox if you want to see this working: https://codesandbox.io/s/framer-motion-animate-width-and-height-animate-prop-j2mlyb