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. …
