framer / motion

Open source, production-ready animation and gesture library for React
https://framer.com/motion
MIT License
22.27k stars 733 forks source link

[BUG] `TypeError: Unable to convert null to object` may occur in certain instances when using whileInView in conjunction with delay #2645

Open lujjjh opened 2 weeks ago

lujjjh commented 2 weeks ago

2. Describe the bug

function Foo() {
  return (
    <motion.div whileInView={{ y: 10 }} transition={{ delay: 0.01 }}>
      Hello, <code>framer-motion</code>.
    </motion.div>
  );
}

When a <Foo /> element is unmounted, a TypeError occurs because framer-motion attempts to animate the 'y' property from 10 to null.

As a workaround, the transition can be relocated to the whileInView property. Nevertheless, it would be more ideal to prevent the TypeError from being triggered.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/p/sandbox/framer-motion-issue-hxv3pt?file=%2Fsrc%2FApp.tsx%3A20%2C17-20%2C28

4. Steps to reproduce

Steps to reproduce the behavior:

  1. Click "Toggle visibility".

5. Expected behavior

No errors occur.

bredigian commented 1 week ago

Hey, can you solved this bug? I have the same problem and I'm furious.

lujjjh commented 1 week ago

@bredigian In this example, only set transition for whileInView: https://codesandbox.io/p/sandbox/framer-motion-issue-forked-6h53tq?file=%2Fsrc%2FApp.tsx%3A23%2C5

bredigian commented 1 week ago

@bredigian In this example, only set transition for whileInView: https://codesandbox.io/p/sandbox/framer-motion-issue-forked-6h53tq?file=%2Fsrc%2FApp.tsx%3A23%2C5

okay, thanks you.