# objectivehtml/flipclock

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/objectivehtml-flipclock).**

2,776 stars · 962 forks · TypeScript · mit

## Links

- GitHub: https://github.com/objectivehtml/FlipClock
- Homepage: http://flipclockjs.com/
- awesome-repositories: https://awesome-repositories.com/repository/objectivehtml-flipclock.md

## Description

FlipClock is a web component library that provides animated flip-style displays for numeric data. It offers a set of components including a flip clock, a countdown timer, a numeric counter, and a general-purpose flipboard, all featuring retro digit-flipping transitions.

The library's core identity is built around creating visually engaging numeric displays that animate digit changes. It includes a countdown timer that can trigger actions when time expires, a counter that can increment or decrement values, and a flip clock for showing the current time. Each component uses the same flip-style animation mechanism to provide a consistent retro visual effect.

Beyond the basic clock and timer, FlipClock can be used to build dashboards or scoreboards by displaying any numeric data through its flipboard component. The library is implemented as web components, making it straightforward to integrate into web projects.

## Tags

### Graphics & Multimedia

- [Flip-Style Clock Animations](https://awesome-repositories.com/f/graphics-multimedia/media-production-suites/animation-tools/programmatic-animation-apis/state-transition-animators/flip-animations/flip-style-clock-animations.md) — Ships a flip clock web component that displays time with retro digit-flipping transitions.

### Programming Languages & Runtimes

- [Flip-Style Countdown Timers](https://awesome-repositories.com/f/programming-languages-runtimes/runtime-execution-environments/timer-schedulers/countdown-timer-managers/flip-style-countdown-timers.md) — Ships a countdown timer component with flip-style digit animations and expiry-triggered actions. ([source](https://cdn.jsdelivr.net/gh/objectivehtml/flipclock@master/README.md))

### User Interface & Experience

- [Flip-Style](https://awesome-repositories.com/f/user-interface-experience/countdown-timers/flip-style.md) — Ships a countdown timer web component with flip-style digit animations and expiry-triggered actions.
- [Flip-Style Numeric Displays](https://awesome-repositories.com/f/user-interface-experience/flip-style-numeric-displays.md) — Provides a flipboard component for displaying any numeric data with retro digit-flipping animations. ([source](https://cdn.jsdelivr.net/gh/objectivehtml/flipclock@master/README.md))
- [Flip-Style](https://awesome-repositories.com/f/user-interface-experience/home-screen-widgets/clock-displays/flip-style.md) — Ships a flip clock web component that displays time with retro digit-flipping transitions. ([source](https://cdn.jsdelivr.net/gh/objectivehtml/flipclock@master/README.md))
- [Flip-Style Numeric Displays](https://awesome-repositories.com/f/user-interface-experience/numeric-value-displays/flip-style-numeric-displays.md) — Provides an animated flip-style display for showing any numeric data with digit-flipping transitions.
- [Flip-Style Numeric Counters](https://awesome-repositories.com/f/user-interface-experience/stylized-numeric-counters/flip-style-numeric-counters.md) — Provides a counter component that increments or decrements values with flip-style digit animations. ([source](https://cdn.jsdelivr.net/gh/objectivehtml/flipclock@master/README.md))
- [Flip-Style](https://awesome-repositories.com/f/user-interface-experience/numeric-value-displays/dashboard-metric-displays/flip-style.md) — Enables building dashboards or scoreboards with flip-style numeric displays for any data.