Like Animation

Learn more about like animations

On most social media platforms today you will find some way of reacting to content. This may be a static one click interaction or maybe there is a bit more excitement with an animation when you react to a photo or some text. By including a custom like button animation for your users when they react to something, you motivate them to interact with more content in your product. And the more pleasing your animation is, the more content they will interact with (and the longer they will stay in your app).

Why should you have a like button?

Whether you’re creating a social media app or just want to offer more custom ways for readers and users to react to your content, an animated like button can be a value add for your product or website.

After all, one of the chief appeals of the Like button, a feature popularized by Facebook in the mid-2000s, is that it serves as a social signal to indicate that someone approves of, or ‘likes’, the content you’re producing.

According to a paper by First Monday, the attraction of the Like button on Facebook stems from its status as a “nano-level interaction,” something that offers a micro-gesture to both the poster and any potential commenters that doesn’t require the kind of rigor required to type an actual response.

Adding animation to the action of “liking” provides visual feedback, perhaps making it a more engaging and enjoyable experience.

To that end, button animations like Facebook’s Like button are key components of web design animation for lots of socially driven sites -- and can be yours as well.

How like animations work in your app or web design

Your like animation can take many forms -- it could be a thumbs up like on Facebook, or a floating heart like on Twitter and Instagram (and which we offer easily via Framer, as we elaborate below).

“Like” actions can be attached to posts, items, or products, and some sites use “Like” features as a way for users to save things. User profiles on Reddit, for example, store all the posts and comments a user has upvoted (Reddit’s version of a “like”).

And, of course, lots of socially driven sites use “likes” as a way to show the popularity of an item, and, sometimes, to inform algorithms that determine what users see.

How to create the floating hearts animation in Framer

With Framer, you can design and prototype with or without using code. By using code you can unlock many more unique interactions in your website design animation. To create the like animation example from above you will need to use code overrides powered by Framer Motion. The first override will be placed on the main heart button and will trigger when the button is tapped and it will cause the main button to increase in size just a few pixels to indicate that it was tapped. The second override is what will create the actual like animation. This override will be placed on all of the other heart graphics to simulate the floating effect that occurs when the heart button is clicked. This will control the position and time out of all the heart graphics as they float up from the button.