search

framer / motion

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

[BUG] Exit animations not firing on motion.p #463

Closed mattgperry closed 3 years ago

mattgperry commented 4 years ago

https://twitter.com/SnazzyHam/status/1227268285663592448

Snazzyham commented 4 years ago

I made a codesandbox for the bug I'm facing, you can find it here.

Essentially, the idea behind this is I have some scrolling text that is spoken out using speech synthesis. To replicate this behaviour in the sandbox, I'm using a button, which basically does the same thing that my onSpeechEnd code does.

The thing I'm trying to build is that I want the top-most p element to fade out, and the bottom one to scroll up to its place. I got the bottom element fading correctly, but for some reason the top element just abruptly pops out. I wrapped it in an <AnimatePresence> and gave it a unique key, so I'm not sure what I'm doing wrong. Would appreciate any help.

popovici-vlad commented 4 years ago

This isn't really a bug or an issue with the library, it mostly has to do with the implementation. They way you set up some of the pieces of the text in the TextComponent was not correct, also the keys of the motion.p elements were changing and that makes it confusing for AnimatePresence to track which elements should get Unmounted and which elements to mount.

I made some modifications on your code sanbox to make it kind of work: https://codesandbox.io/s/keen-tree-f5lh6?fontsize=14&hidenavigation=1&theme=dark

the implementation might not be perfect, and the code messy but it shows you that you can make the first element exit the dom properly with a nice animation.

mattgperry commented 3 years ago

The key needs to be the same for the same component throughout its lifecycle within AnimatePresence. As @neonefirst correctly explains, this would involve (for instance) providing a unique ID for each string.