Want to build websites in no-time? Announcing the new Framer Beta.Learn more
Framer
Want to build websites in no-time? Announcing the new Framer Beta.Learn more
Framer
  • Teams
  • Showcase
  • Developers
  • Resources
    • Tutorials
    • Examples
    • Components
    • Templates
    • Sessions
    • Support
    • Updates
  • Blog
  • Pricing
  • ···
    • Blog
    • Pricing

Smart Components

Social App
Music Player
To Do App

Magic Motion

Photo View
Tab Navigation
Card List
Mobile Carousel
Floating Action Button
Dynamic Grid
Expandable Menu
Image Gallery
Image Gallery 2
Magic Motion
Reels: Drag
Stories UI
Swipe & Expand
To-Do List
Toggle Menu

Overlays

Bottom Sheet
Draggable Sheet
Modal Window
Side Menu

Components

Input Form
Loading Indicator
Radio Buttons
Tooltip on Hover

Flows

Checkbox Form
Splash Screen
Timeout Transition

Interactions

Accordion Menu
Carousel Design
Drop on Scroll
Image Panning
Input Data
Input Validation
Like Animation
Press-And-Hold
Nested Scroll
Progress Bar Design
Show Password
Star Rating
Stories: Tap
Swipe Menu
Switch Sheet
Menu Tab
Toast Prompt
Wheel Picker

Effects

Cover Flow
3D Carousel
Flip Animation
Parallax Effect
Perspective Tilt
Pile Effect
Shuffle
SVG Animation

Integrations

Google Sheets
Map
Signature Pad
Sound Effects

Code

Card Swipe
Custom Effect
Drag Handle
Dynamic Header
Like Counter
Scroll Progress
Slider

Like Animation

Open in Framer to interactPreview this example

Reward your user with floating hearts in this animated micro-interaction.

Open in FramerPreview Example

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.

Resources
  • Interactions Support
  • Transitions Support
  • Like Counter
  • Talk about this on Discord

Framer

  • Teams
  • Pricing
  • Showcasenew
  • Blog
  • Developers
  • Updates

Platforms

  • Web
  • macOS
  • Windows
  • iOS
  • Android

Learn

  • Tutorials
  • Examples
  • Templates
  • Sessions

Resources

  • Components
  • Input Kit
  • State of Prototyping
  • Desktop Prototyping
  • Prototyping Tool
  • Mockup Tool
  • Wireframing Tool
  • UI/UX Design Tool
  • Graphic Design Tool
  • User Testing

About

  • Loupe
  • Community
  • Company
  • Careers
  • Legal

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2022 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement