Animating Icons

Since a lot of people liked when I posted this interaction on Twitter, I figured I'd share the code snippets for the animation here.

<button onClick={handleCopy} className="button">
  {isCopied ? <CheckIcon /> : <CopyIcon />}
</button>

Animating opacity, scale and blur on icons when they are shown contextually makes the transition feel better and more responsive.

As you can see, you can achieve the same effect with CSS only as well. I personally prefer Motion, because it allows me to use spring animations easily.

In case you have any questions reach me at jakub@kbo.sk or see more of my work on Twitter.