search

framer / motion

Open source, production-ready animation and gesture library for React
https://framer.com/motion
MIT License
22.27k stars 733 forks source link

[BUG] RotateZ not working in Shared Layout Animation #2611

Open paul-hellomolly opened 1 month ago

paul-hellomolly commented 1 month ago

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

https://github.com/framer/motion/assets/96453123/527b9f35-850e-4af8-a447-0bf4bf1afa39

7. Environment details

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

mattgperry commented 1 month ago

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 commented 1 month ago

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.