Build a reusable, functional animation component for using React Hooks.

Animations delight users. And you’d think, by the sheer volume of articles, that React Hooks delight developers. But for me, fatigue was starting to creep into my opinions on Hooks. But serendipity saved me, as I found an example that was a good match for React Hooks, rather than just “the new way”. As you probably have guessed by this article’s title, that example was an animation.

(Note: This article was first published on freecodecamp.org.)

I was working on a React application with cards in a grid. When an item was removed, I wanted to animate its exit, like this.

Image for post
Image for post
my goal

Unfortunately, there are nuances to making this work. …

About

Christian Sepulveda

espresso fanatic, coder (still), VP Engineering Bastille, …yeah, espresso comes first. https://christiansepulveda.com

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store