In the first post in this series, we examined the basics of micro-interactions: what are they, why should you use them, how you build them. In the second post, we built two animated menus.

In this tutorial, we’ll build two fun animations: a modal and an image gallery.

Modal:

Image Gallery:

We’ll use react-spring’s useTransition to illustrate how you can mount and unmount a component, in our case a modal, from the DOM and mount photos to and from a photo gallery.

Embed Code Sandbox:

In the previous blog, we looked at the pieces of a micro-interaction. Let’s define the interaction trigger, state definition, and animation definition for our modal component. …