[BUG] Chakra UI components using `motion` animations stuck in `initial`

1. Read the FAQs 👇

✅ Unsure if this is related to the AnimatePresence key FAQ or not. I tried adding an unchanging key in a number of places with no change.

2. Describe the bug

We’ve had a number of issues opened for Chakra UI that many of our components that rely on framer-motion (like Modal) are not appearing. We’ve discovered that framer-motion@4.1.11 is the most recent version where animations work correctly.

It looks like the components are rendering correctly but are not leaving their initial state. In the repro below, inspecting the page shows that the modal content elements are all there, but the outer wrapper has the following style:

opacity: 0;
transform: scale(0.95) translateZ(0px);

This is consistent with the exit variant we defined, which is the initial and exit variant for this animation.

Here are a few links to relevant sections of the Chakra codebase:

• The outer component is Modal which renders its contents within a Portal which is within AnimatePresence: https://github.com/chakra-ui/chakra-ui/blob/5158798cbc2f368f2ff4015662733b27d4dd37a6/packages/modal/src/modal.tsx#L176-L182
• The component which renders the actual animation is ModalTransition: https://github.com/chakra-ui/chakra-ui/blob/7da7eec74db01532a65f9c4aca64e4d142bd620d/packages/modal/src/modal-transition.tsx#L21-L36
• The animation and variants it uses are defined here: https://github.com/chakra-ui/chakra-ui/blob/d7f2fa81fbf35199d36e57058e5a8e39f6ec2c6e/packages/transition/src/scale-fade.tsx#L28-L51
• The component that renders ModalTransition is ModalContent, and it’s rendered inside a div here: https://github.com/chakra-ui/chakra-ui/blob/5158798cbc2f368f2ff4015662733b27d4dd37a6/packages/modal/src/modal.tsx#L253-L266

As noted above, I tried adding an unchanging key in various places throughout just to see if that might be part of the issue and nothing seemed to make a difference.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

Broken (4.1.13): https://codesandbox.io/s/proud-violet-3gqny?file=/pages/index.tsx Working (4.1.11): https://codesandbox.io/s/flamboyant-jackson-i9ouh?file=/pages/index.tsx

4. Steps to reproduce

Steps to reproduce the behavior:

1. Click “Open Modal”

5. Expected behavior

The modal animates correctly.

---

If there’s any other information I can provide or if pairing to investigate within our codebase would be helpful, I am happy to help!

[mattgperry]

Wooo!

[mattgperry]

@paambaati How did you verify this? I’ve had inconsistent results simply version bumping Next.js sandboxes in CodeSandbox

Seems to work for me: https://codesandbox.io/s/autumn-water-s7nor