Exit animation does not play and the entire list re-renders if a list item is removed #2634

is-it-ayush · 2024-04-19T10:03:30Z

is-it-ayush
Apr 19, 2024

I've the following code

import Head from "next/head";
import { AnimatePresence, motion } from "framer-motion";
import { useState } from "react";
import { v4 as uuid } from "uuid";

const listAnimation = {
  hidden: {
    opacity: 0,
  },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1,
    },
  },
}

const itemAnimation = {
  hidden: {
    opacity: 0,
  },
  visible: {
    opacity: 1,
  },
}

export default function Home() {
  let [list, setList] = useState(Array.from({ length: 5 }, (_, __) => uuid()));

  function handleIncrement() {
    setList([...list, uuid()]);
  }

  function handleDecrement() {
    setList(list.slice(0, -1));
  }

  return (
    <>
      <Head>
        <title>Framer Lotion</title>
        <meta name="description" content="framer motion playground" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className="flex flex-col items-center justify-center min-h-screen bg-black gap-4">
        <motion.ul
          variants={listAnimation}
          initial="hidden"
          animate="visible"
          exit="hidden"
          className="flex flex-col items-center gap-4 list-none"
        >
          <AnimatePresence>
            {
              list.map((item, _) => (
                <motion.li
                  key={item}
                  variants={itemAnimation}
                  // initial={{ opacity: 0, y: -50 }}
                  // animate={{ opacity: 1, y: 0 }}
                  // transition={{ duration: 0.1, delay: idx * 0.1 }}
                  className="p-5 rounded-lg bg-white/10 w-[400px]"
                />
              ))
            }
          </AnimatePresence>
        </motion.ul>
        <div className="flex gap-4">
          <button onClick={handleIncrement} className="px-4 py-2 text-white">Increment</button>
          <button onClick={handleDecrement} className="px-4 py-2 text-white">Decrement</button>
        </div>
      </main>
    </>
  );
}

The increment button works fine and the added item animates in from initial state to animate state. The only problem is when I decrement,

the item is abruptly removed the list
the entire list reanimates from initial to animate
the exit animation does not play.

Here's a demo of problem, How do I play the exit animation on decrement and prevent the entire list from re-animating itself when the item is removed?

Screencast.from.2024-04-19.14-45-32.mp4

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Exit animation does not play and the entire list re-renders if a list item is removed #2634

{{title}}

Replies: 0 comments

Select a reply

Exit animation does not play and the entire list re-renders if a list item is removed #2634

is-it-ayush Apr 19, 2024

Replies: 0 comments

is-it-ayush
Apr 19, 2024