DEV Community

Cristian Calara
Cristian Calara

Posted on • Originally published at

Recreating the Twitter Heart Animation with Vue

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

Twitter Fave Animation

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:

Initial animation sprite

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:

New animation sprite


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

Top comments (7)

cristiancalara profile image
Cristian Calara

You are correct in that Vue is in no way important here. It's just that I used this component for an actual project and wanted to share the full Vue component as someone might re-use this in their own Vue project.

sanderdebr profile image


rafaacioly profile image
Rafael Acioly

I've seen people do it with pure css

cristiancalara profile image
Cristian Calara

Yes, not much Vue specific about the animation itself. I just wanted to share the full component as if someone already used Vue for a project, it could just paste it in and use this.

There's also an article or two that explains how to implement the animation fully with CSS, removing the sprite altogether. Though I don't think it looks as good as with the sprite.

champi profile image

would you publish it to npm?

cristiancalara profile image
Cristian Calara

Thanks, Daniel. I might do that, though it won't be soon. I'll be pretty swamped next month.