Recreating the Twitter Heart Animation with Vue

I recently had to add the Twitter "fave" animation to a project.

There are quite a few articles out there (and there and there) that describe how the animation works and how to replicate it. You can read one of those articles to understand better how the animation is implemented, but the gist of it - is uses a sprite and animation-timing-function: steps.

The original sprite looked like this:

As you can see, the heart is actually contained in the sprite. This was an issue in my case, as I had the requirement to use the existing SVG heart icon I was using across the project.

The good news is that Twitter updated their implementation and removed the heart from the sprite. They now use an SVG icon for the heart, and only the particles are in the sprite. Their new sprite looks like this:

Result

Using the new sprite and my custom icon, I ended up with something like this:

Some notes on re-using the component:

• You need to use a red-ish color for the icon unless you update the sprite
• You can replace the FavoriteIcon SVG with any other icon e.g., a star
• You can update the size by changing the font-size on .toggle-favorite
• You might want to preload the sprite to avoid the animation looking a bit slug-ish on the first click