[BUG] Issue animating logical properties inset-inline-start and inset-inline-end

[danhollick]

Framer motion doesn't seem to support animating logical properties like inset-inline-start and inset-inline-end. These should work the same as their physical counterparts, left and right.

Using framer-motion:10.0.1 and react:18.20.

Here's a reproduction of the issue. For some reason the animation only works in one direction using inset-inline-start and inset-inline-end but as you can see it doesn't tween between the two values.

Screen.Recording.2023-03-02.at.09.14.26.mov

[mattgperry]

We do support animating left/right in the manner shown here but the way we do this is pretty legacy, I kind of wish it wasn't in there. Even so animating left/right is relatively common whereas inset-inline-start and inset-inline-end isn't - so it's not something I'm going to add where you could animate them in the same way.

However, the way I'd recommend animating these props is the same way I'd recommend animating left/right. Which is, changing them via style and adding a layout prop.

<motion.div 
  layout
  transition={{ type: "tween", duration: 0.25, ease: "easeInOut" }}
  style={{
    insetInlineStart: rtl ? 0 : "auto",
    insetInlineEnd: rtl ? "auto" : 0
  }}
/>

This way the animation itself happens via transform which is more performant than animating these values directly.

[danhollick]

@mattgperry gotcha.

I was trying to leverage variant propagation for something but I think I could work around that.