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.

More

If you enjoy articles like this and want to learn more, take a look at Interfaces, my design engineering magazine.

It’s where I share everything I know, from animation and typography to layout, color and everything else that is a part of building a great interface.