DEV Community

How AnimatePresence in framer-motion works

Regina Liu on January 06, 2024

Suppose you want to have a React component perform an animation before it exits. It's tricky, because there's no simple native way to do so. A comp...
Collapse
 
thesanjeevsharma profile image
Sanjeev Sharma

Wow! Such an insightful article. You should write more often.

I am curious, what made you look the framer-motion codebase? Also, were you able to understand it all by yourself?

Collapse
 
regexyl profile image
Regina Liu

Thanks! It's my first ever article - feel free to suggest anything that I could improve upon - or anything that you'd like to see 😄

I used framer-motion at work, and was intrigued by how it was implemented behind the scenes. I do that often enough if I have the time, either by going on GitHub and clicking into the source code, or (in VS Code), right click on the variable + Go to source definition. It's always nice to see how things deviate from what you've imagined of them. It takes quite a bit of time - for this framer-motion codebase, it took me a few hours, but I could have cut the time down by getting less sidetracked to figure out non-essential information to AnimatePresence.

Collapse
 
thesanjeevsharma profile image
Sanjeev Sharma

I'd love to see some articles on frontend performance or about your experience at Meta.

Thread Thread
 
regexyl profile image
Regina Liu

Sounds right up my alley - will be writing more in the next few weeks!

Collapse
 
random_ti profile image
Random

Awesome 🔥