webdevpuneet.com

Related Snippets

175 in Animations category
1–6 of 60

Matter.js Ball Pit Hero Section

Matter.js Rope Bridge You Can Cut

Matter.js Soft-Body Jelly Blobs

Matter.js Drag-and-Throw Physics Playground

Matter.js Newton's Cradle (Drag to Swing)

Rough.js Sketchy Annotation Highlight

Flip Countdown — Free HTML CSS JS Flip Clock Countdown Timer

Flip Countdown · Animations · Plain HTML, CSS & JS · Live preview

CategoryAnimations
Tags3D EffectsCSS AnimationTimers & ClocksMicro-Interactions

Copy & paste

Source Code

<div class="fc-wrap">
  <p class="fc-title">Launch in</p>
  <div class="fc-clock" id="fcClock">
    <div class="fc-unit"><div class="fc-flip" data-unit="hours"></div><span class="fc-lbl">Hours</span></div>
    <div class="fc-unit"><div class="fc-flip" data-unit="minutes"></div><span class="fc-lbl">Minutes</span></div>
    <div class="fc-unit"><div class="fc-flip" data-unit="seconds"></div><span class="fc-lbl">Seconds</span></div>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Split-flap fold
Two 3D leaves fold over the static halves.
Sequenced animation
Bottom leaf starts as the top one ends.
Flips only on change
Idle tiles stay still to save work.
Animation restart
Reflow trick replays CSS each second.
Tabular digits
Numbers keep equal width while flipping.
Clamped countdown
Stops cleanly at zero at the deadline.
Data-unit driven
One tile logic powers all groups.
No images
Pure CSS 3D, no sprites or fonts.

About this UI Snippet

Flip Countdown — A Split-Flap Clock That Folds Each Second

Screenshot of the Flip Countdown snippet rendered live

The flip countdown is the split-flap "departure board" timer, where each number tile folds down the middle to reveal the next value — the nostalgic mechanical-clock animation used on launch pages and event sites. This snippet builds it with plain HTML, CSS 3D transforms, and a vanilla JavaScript countdown, with no images and no library.

The four-layer tile

Each tile is built from four stacked halves: a static top and bottom showing the current number, plus two "leaf" halves that animate. The static halves are split so the top shows the upper portion of the digit and the bottom shows the lower portion, exactly like a physical flap display where a card is divided across the fold line. overflow: hidden on each half clips the full-height number so only its top or bottom appears.

The fold animation

When the value changes, two keyframe animations run in sequence using rotateX and a perspective parent. The top leaf — carrying the old number — folds down from 0deg to -90deg, disappearing at the fold line; then the bottom leaf — carrying the new number — folds up from 90deg to 0deg to land flat. backface-visibility: hidden and transform-origin at the fold line make the two leaves read as one card physically flipping over. The second animation is delayed to start exactly when the first finishes, so the motion is continuous.

Only flipping on change

setTile compares the new value to what's displayed and returns early if they match, so a tile only animates when its digit actually changes — the seconds flip every second, but the hours sit still until they tick. To replay a CSS animation each second, the code removes the is-flipping class, forces a reflow with void el.offsetWidth, then re-adds it; without that reflow the browser would coalesce the change and the animation wouldn't restart.

Committing the value

After the fold lands, a setTimeout writes the new number into the top static half so the tile rests showing the final value, ready for the next flip. The numbers use font-variant-numeric: tabular-nums so the digits don't shift width as they change.

A real countdown

A target timestamp is set a couple of hours ahead, and a one-second setInterval recomputes hours, minutes, and seconds from the remaining difference, clamped at zero so it stops cleanly at the deadline. Each .fc-flip reads its unit from a data-unit attribute, so the same tile logic drives all three groups.

Customizing it

Point target at a real launch date, add a days group, change the tile size or colours, or adjust the fold duration. Pair it with a countdown timer, a flip clock, or a coming soon hero.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA three-group flip countdown starts ticking.
  2. 2
    Watch the secondsEach second the tile folds to the next value.
  3. 3
    Note minutes and hoursThey flip only when they actually change.
  4. 4
    Set a targetPoint target at your real launch timestamp.
  5. 5
    Add a days groupCopy a unit and extend the time math.
  6. 6
    Restyle the tilesChange size, color, and fold speed.

Real-world uses

Common Use Cases

Coming-soon launch pages
Headline a coming soon hero with split-flap tiles whose digits fold over in 3D to reveal the next value each second.
Sale urgency above pricing
Put a mechanical timer above a pricing card so a deadline feels tangible, with tiles that only animate when a digit actually changes.
Event countdown clocks
Offer a richer alternative to a plain countdown timer, with the bottom leaf starting its fold just as the top one finishes.
Clock pairings
Pair with a flip clock so the current time and the time remaining share one nostalgic departure-board look.
Drop and trial deadlines
Build hype for a drop near a stock urgency bar, or show time remaining beside a trial countdown in an app.
Related: Magnetic Grid
See the Magnetic Grid for a related animations pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

Each tile has static top and bottom halves and two animating leaves. On change, the top leaf carrying the old number folds from 0 to -90 degrees with rotateX under a perspective parent, then the bottom leaf carrying the new number folds from 90 to 0 degrees. backface-visibility: hidden and a fold-line transform-origin make the two leaves read as one card flipping over.

To replay a CSS animation every second, the code removes the is-flipping class, reads void el.offsetWidth to force a reflow, then re-adds the class. Without that reflow the browser coalesces the remove and add into no change, so the animation would not restart. The reflow guarantees a fresh run each tick.

No. setTile compares the new value to the displayed one and returns early if they match, so a tile only folds when its digit actually changes. The seconds flip every second, but minutes and hours sit still until they tick, which avoids needless animation and looks correct.

A target timestamp is set ahead of now, and a one-second interval recomputes the remaining seconds, then derives hours, minutes, and seconds with division and modulo. The difference is clamped at zero so the clock stops cleanly at the deadline. Each tile reads its unit from a data-unit attribute to pick the right value.

Keep the target time and a ticking value in state with a one-second interval in a mount effect (cleared on unmount). For the flip, it is cleanest to keep the four-layer tile as a small child component that animates on a value-prop change via a key change or a transition, rather than manual class toggling. The 3D CSS ports unchanged.