[BUG] Issue with CSS transform

Hi,

If I apply the framer motion animation on an element which is centered using the following CSS code:

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

Framer motion, will reset the transform property to 0. So it won’t be center anymore.

Here is a sample on CodeSandbox: https://codesandbox.io/s/fancy-hooks-4gj59?file=/src/App.js

Is there anyway to fix this behavior?

Thank you.

[mattgperry]

There is also a transformTemplate prop you can use to output custom transform strings.

[artemmatiushenko1]

Is it possible to use layoutId together with transform template? I have a circle div and I need it to make tranform: translate(50%) in order to properly center it relatively to navigation item. But when I use tranform in css it overrides to transform none by framer. If I use transform template shared layout animation doesn’t perform

 {selectedPage === path ? (
      <S.Circle
        transformTemplate={template}
        style={{ y: '50%' }}
        layoutId="circle"
      />
    ) : null}```