[BUG] RotateZ not working in Shared Layout Animation

[paul-hellomolly]

1. Read the FAQs 👇

👍 Yep.

2. Describe the bug

The rotateZ transform property doesn't work on a shared layout animation.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/p/sandbox/framer-motion-shared-layout-animation-with-rotatez-forked-j8ptt5

4. Steps to reproduce

Steps to reproduce the behavior:

1. Click the element in the sandbox demo to trigger the animation.
2. Click the element once more to return to the previous state.
3. The rotateZ transform no longer works.

5. Expected behavior

Shared layout animation should be able to detect the rotateZ property during animation.

6. Video or screenshots

Screen.Recording.2024-04-08.at.10.32.09.PM.mov

7. Environment details

Operating System: macOS Sonoma 14.0
Browser: Firefox 124.0.2 (64-bit)

[mattgperry]

Can you amend your sandbox to show the reported bug?

Additionally when using layout animations, layout-properties should be set statically via style or CSS, not animated via animate

left: handBounds.width / 2 - 150 / 2

[paul-hellomolly]

Oh my, I sent the wrong link, my bad! I also updated the sandbox to use the "style" prop as you mentioned.

One thing that I found out is that the shared layout animation seems to work just fine if I change rotateZ to rotate.