[BUG] CSS transform is being removed after transition/animation

[omerfaran]

Hello everyone,

I see that my issue is related to this thread: #914

In my case, I'm using framer motion to have an animated transition on left of position: absolute

const Handle = styled(motion.div)<{ isOn: boolean; variantColor: string }>(
  ({ isOn, theme, variantColor }) => ({
    top: '50%',
    position: 'absolute',
    left: isOn ? '65%' : '0%',
    transform: 'translateY(-50%)',
    backgroundColor: variantColor,
    borderRadius: 'inherit',
    cursor: 'pointer',
  }),
);

This is a toggle that changes the x but the y should always have transform: 'translateY(-50%)',.
However framer motion will reset it when transition is being applied. My element:

        <Handle
          layout
          isOn={isOn}
          transition={spring}
          variantColor={variantColor}
          whileTap={{ scale: 0.95 }}
          onClick={() => setIsOn(!isOn)}
        />

I'm sharing a very basic code that demonstrates it:
https://codesandbox.io/s/xenodochial-taussig-14dnlz

Thank you very much in advance!

4. Steps to reproduce

Steps to reproduce the behavior:

1. Click on 'move right' in the sandbox code

5. Expected behavior

Y axis shouldn't be changed, only X

[mattgperry]

As its performing independent transforms and layout animations these will conflict with externally-created transforms.

You could set y to "50%" via the motion component's style prop.

[mattgperry]

Hmm although thinking about it that will probably conflict with layout animations. Maybe you could do this via the transformTemplate prop

transformTemplate={(_, generated) => `translateY(-50%) ${generated}`}