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 have any questions you can reach me via email, see more of my work on X (Twitter) or subscribe to my newsletter below.