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 Counter

Open in Framer to interactPreview this example

Show an animation sequence for each new like with Framer’s like counter pattern.

Open in FramerPreview Example


Learn more about like counters

What is a like counter?

A like counter is a simple method of logging – and displaying – user approval. Adding a like counter to the UI design of an app or website will help to increase user engagement while also gathering valuable data.

From social media and blogging platforms to news-media websites and e-commerce stores, everyone loves a like. By clicking a like button, users are able to signal approval or enthusiasm with a minimum of effort. But as simple as the concept may be, the like button has literally changed the world over the last decade and a half.

Like counters first date back to the mid-2000s. Since that time they have gradually become ubiquitous; arguably even altering human behavior. Indeed, not only have many people come to derive much of their self esteem and social validation from the number of clicks they receive via like buttons, but the data provided has become invaluable to businesses everywhere.

Social media like counters

Now data from a like counter can be used to quite accurately predict everything from shopping preferences to voting habits. In a well-known social experiment conducted during the early days of social media, it was discovered that an algorithm could better predict a person’s behavior than their partner could; merely by studying the data collected from social media likes.

The like counter is undoubtedly one of the most powerful digital tools out there. While in recent years some social media platforms have chosen to hide likes from public view, like counters are still there clocking up data behind the scenes. Indeed the phenomenon doesn’t show any signs of going away just yet.

Types of animated like counters

There are two main types of animated like counters: the rolling number counter and the number ticker. Both types can be incorporated into your website or app to help your users interact with your content. When users click on the like counter each time they want to upvote a post, comment, video, product, or article, the number of likes gets aggregated and displayed to other users in real-time, establishing trust within the community.

The rolling number counter

This animated like counter has the same animation mechanics as a digital clock with digits that roll upwards or downwards when every second, minute, or hour passes. Often accompanied by an icon or text, the rolling number counter is mostly used to represent real-time user interaction with user-generated content, such as comments and videos.

The number ticker

The number ticker is often used for a slightly different purpose to the rolling number counter. Website and app developers prefer to use this type of like counter to show the total number of likes, views, donations, and similar metrics on a dashboard. The animation for the number ticker is usually rapid, going from 0 to the current total number in a matter of seconds

How JavaScript like counters are made

Like counters can be made with JavaScript or its more lightweight cousin, jQuery. Both coding languages can make numbers on your website or app more dynamic using just a few statements from a framework or library. The JavaScript code can be customised later as your preferences change.

A like counter made with JavaScript will usually contain a function that accepts a start, end, and duration, effectively turning the like counter into an animation. Designers can play with different parameters such as speed, which is the time in milliseconds that the counter will reach the desired number, the number styles, and even the text accompanying the like counter.

Resources
  • Interactions Support
  • Transitions Support
  • Like Animation
  • 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