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

Comments

[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]

Awesome!

[Rafael Acioly]

Nice!
I've seen people do it with pure css

cssanimation.rocks/twitter-fave/

codepen.io/donovanh/pen/dYqxNb

[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]

Cool,
would you publish it to npm?

[Cristian Calara]

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