Features

This component employs a technique known as 'chained animation'—meaning we don't just use two variants for the start and end states of the animation, but we include several in-between steps as well.

To pull this off in Framer, I'm utilizing a tap interaction to kick-start the animation chain. After that, I link the middle steps using 'appear' animations that automatically activate as a variant shows up on the page.

I also employed another little trick in this animation—I placed the SVG code of the heart icon into an SVG component. This allowed me to animate the size of the SVG by resizing the SVG component. If you just paste an SVG layer into Framer, it won't animate across different variants.

You can get this SVG component by remixing the project—where you'll then find and copy the component from.