The rounded corners and the border thickness are getting distorted when animating size changes. I would imagine a repeating background image would distort similarly. Basically any effect that doesn’t commute with affine transforms is going to look distorted while the animation is running.
Additionally to the sibling comment, we do expose a secret API that can be used to fix distortion on other properties.
To take border from your example, in the Framer app we add correction that fixes border. But border is tricky because it only renders rounded values and triggers layout - exactly what we're trying to avoid. I always recommend a two element approach, one with an inset. More performant and visually nicer.
We also use this API to do more advanced stuff like this <LayoutCamera /> component for React Three Fiber/Framer Motion 3D. https://www.framer.com/docs/layoutcamera/
This camera renders the scene pre-distorted so when the layout transform is applied, everything looks correct.
>This camera renders the scene pre-distorted so when the layout transform is applied, everything looks correct.
Close, but still not perfect. Lines look blurry during the size animation, because the WebGL surface is rendered at the new resolution and then stretched to the current size. So if you animate from a 600x600 viewport to a 60x60 viewport it’s gonna look very bad when the animation starts. You should always render at max(old, new) resolution during the animation.
And again, this only works as long as the WebGL content commutes with affine transforms. If the WebGL content would contain 1 pixel screen-space hairlines, those would look bad when the framebuffer is stretched.
