[BUG] Issue with CSS transform

[imangm]

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.

[oielbanna]

x and y in variants are gonna affect the transform css so you would have to remove that from your CSS class and add it to each of tbe variant classes. Since you're only actually changing the y, add x: "-50%" in all the variants you have - both show and hide. Does that work as expected?

[imangm]

@oielbanna Yeah, it worked using your solution. I removed all the transform CSS codes and put them in variants. Thank you!

BTW, It should be nice if it gives us the option to grab the initial status of the element and calculate the results based on that.

[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}```

[bosbode]

I'm also not getting the desired result, when using transformTemplate and layout.

[ShubhaPradhan]

You can add x: 'THE VALUE OF TRANSLATE IN PERCENTAGE HERE'
The image below shows how to do it using percentage, this work perfectly

[BOSSladis]

@oielbanna Yeah, it worked using your solution. I removed all the transform CSS codes and put them in variants. Thank you!

BTW, It should be nice if it gives us the option to grab the initial status of the element and calculate the results based on that.

Hey, how did you manage the translateY(-50%) and your y: -100, in your code to achieve both?
I'm facing a similar issue, where I have something centered in the same way and need to animate it on scroll with the style prop.

I'm trying to achieve something like this:

const { scrollY } = useScroll();
const transformedScrollY= useTransform(scrollY, [0, 200], [0, -100]);
// ...
<motion.img
style={{
y: `calc(-50%-${transformedScrollY}px)`,
x: "-80%",
}}
src={img}
alt="An image"
id="image"
/>