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
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:
Using the new sprite and my custom icon, I ended up with something like this:
- You need to use a red-ish color for the icon unless you update the sprite
- You can replace the
FavoriteIconSVG with any other icon e.g., a star
- You can update the size by changing the
- You might want to preload the sprite to avoid the animation looking a bit slug-ish on the first click
Claim your page on DEV before someone else does
Level up every day