CODEWITHSUNDEEP
reactjsframer-motion
Pratik Wadekar
Pratik Wadekar

Reputation: 1274

StaggerChildren is not working with Framer Motion

When my app loads initially all the list items are animating together instead of the staggering effect. I am also using AnimatePresence for exit animations when my todo is deleted from state.

For Framer Motion I am using below variants

const listItemContainerVariant = {
    hidden: { opacity: 0 },
    show: {
      opacity: 1,
      transition: { staggerChildren: 1 }
    }
  };
  const listItemVariant = {
    hidden: { x: -500 },
    show: { x: 0, transition: { type: "spring", stiffness: 120 } },
    exit: { scale: 1.1, x: 500, opacity: 0 },
    hover: { scale: 1.1 }
  };

I am using useState for managing my todos:

const [todos, setTodos] = useState(
    localStorage.todos ? JSON.parse(localStorage.getItem("todos")) : []
);

Below is my JSX Code

<motion.ul
          id="todo-list"
          variants={listItemContainerVariant}
          initial="hidden"
          animate="show"
        >
          <AnimatePresence>
            {todos.map((todo, index) => (
              <motion.li
                variants={listItemVariant}
                initial="hidden"
                animate="show"
                exit={"exit"}
                whileHover="hover"
                key={todo.id}
                className="list-item"
              >
                <span className="list-item-text">{todo.text}</span>
                <button onClick={() => handleEdit(todo)} className="edit-btn">
                  <span role="img" aria-label="emoji">
                    ✏️
                  </span>
                </button>
                <button
                  onClick={() => handleDelete(todo.id)}
                  className="delete-btn"
                >
                  <span role="img" aria-label="emoji">
                    🗑
                  </span>
                </button>
              </motion.li>
            ))}
          </AnimatePresence>
        </motion.ul>

Upvotes: 3

Views: 9311

Answers (1)

Pratik Wadekar
Pratik Wadekar

Reputation: 1274

I figured out that for staggerChildren to work I had to take off the exit and hover properties from listItemVariant and add it separately in the motion.li component. This little fix got it working.

const listItemVariant = {
    hidden: { x: -500 },
    show: { x: 0, transition: { type: "spring", stiffness: 120 } }
};

  <motion.li variants={listItemVariant}
                exit={{ scale: 1.1, x: 500, opacity: 0 }}
                whileHover={{
                  scale: 1.1
                }}
                key={todo.id}
                className="list-item"
              >

Upvotes: 10

Related Questions