Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Drawer/Modal exit animation doesn’t work

See original GitHub issue

🐛 Bug report

The exit animation for drawers and modals isn’t playing before the component is unmounted.

💥 Steps to reproduce

Go to reproduction linked below
Press “Toggle” to open the drawer
Close the drawer

💻 Link to reproduction

CodeSandbox reproduction: https://codesandbox.io/s/boring-noyce-833wl?file=/pages/index.js

🧐 Expected behavior

I’d expect the animation (e.g. fade out) to complete before the component is unmounted.

🧭 Possible Solution

I’m wondering if this might be caused by having Portal as the immediate child of AnimatePresence, instead of the modal/drawer content component.

🌍 System information

Software	Version(s)
Chakra UI	1.6.3
Browser	Safari 14.1, Chrome 90
Operating System	macOS 11.3.1

Issue Analytics

State:
Created 2 years ago
Reactions:6
Comments:6

Top GitHub Comments

2reactions

joshuabakercommented, Sep 10, 2021

@segunadebayo Why did you close this? This issue is unresolved.

1reaction

bkiaccommented, Feb 25, 2022

DrawerOverlay is needed for the closing animation, see https://github.com/chakra-ui/chakra-ui/discussions/4327

Top Results From Across the Web

Framer motion exit animation doesn't work with HashRouter

And framer-motion exit animations just got disabled, appearing animations and other still work fine. Only exit animations stopped.

Change, remove or turn off animation effects - Microsoft Support

On the Animation tab, click Animation Pane. Open the Animation Pane. On the slide, click the animated object that you want to remove...

AnimatePresence | Framer for Developers

Exit animations. AnimatePresence works by detecting when direct children are removed from the React tree. Any motion components contained by the removed child ......

Exit animation with `framer-motion` demystified

If you have worked with animation in React, you probably faced the problem of not being able to animate easily a component that...

Springy Animated Modals // Framer Motion & React Tutorial for ...

Create amazing animations in React with Framer Motion. In this tutorial, we build an interactive modal window from scratch and customize its ...