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 like 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 with will stay in your app.

How to create one in Framer

With Framer you can design and prototype with or without using code. By using code you can unlock many more unique interactions. 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 override will control the position and time out of all the heart graphics as they float up from the button.