Framer motion exit animation not working in next JS

Supun Tharinda 0
Viewed 38

I started a project with next.js using framer motion and chakra UI. Transition and Hover animations are working. But the dom element disappears before the exit animation end. Here's my code snippets.

 <AnimatePresence exitBeforeEnter>
    {!isRecentStoryHovered && (
        <motion.div key="modal" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 2, ease: "easeInOut", when: "afterChildren" }}>
            <Flex gap="2">
                <Button borderRadius="full" w="10" h="10" variant="solid" padding="0">
                    <IconFileDots color="white" size="24" />
                </Button>
                <Button borderRadius="full" w="10" h="10" variant="solid" padding="0">
                    <IconMessageCircle2 color="white" size="24" />
                </Button>
            </Flex>
        </motion.div>
    )}
</AnimatePresence>

I've imported the necessary things correctly.

import { motion, isValidMotionProp, AnimatePresence, useAnimationControls } from "framer-motion";

But dom disappear before the exit animation.

enter image description here

framer-motion next.js
1 Answers

I found the problem. This element was a child inside another motion.div element which was wrapped inside a Chakra UI Box by using 'chakra factory function'. https://chakra-ui.com/getting-started/with-framer

That parent Chakra box made an instant DOM update that cannot capture by AnimatePresence. When I converted my Chakra Box to regular motion.div it worked. Also, the second method shown in the above documentation worked too. (Using as prop.)

Supun Tharinda0
Related