Animating icons

Since a lot of people liked when I posted this interaction on Twitter (opens in a new tab), 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 alone 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 about building great interfaces. From animation and typography to performance and accessibility.