Split-Flap Board
Airport-departure-board character flipping for headlines, stats and status rows, with each cell rolling on a real 3D hinge and the board resolving as a staggered wave.
About This Effect
A mechanical split-flap effect that turns headlines, stats and status rows into an airport departure board. Every character is a real hinge built from four clipped glyph layers: a top leaf falls 180 degrees onto the half below it, shadowing it deepest mid-flip, so the flipping is visibly hinged rather than a fade or a scramble.
Cells roll through a configurable character set and decelerate into their destination, and rows lag columns so a whole board resolves as a wave running out of the top-left corner. The final flap overshoots its stop a few degrees and settles, then a light sweeps across the glass as the last cell lands.
A shuffle control re-flips every cell to a new destination on demand, which is what turns a reveal into something a visitor will press repeatedly.
What's Included
- True hinged flaps: a leaf rotating a full 180 degrees on the split line, not a fade, slide or character scramble
- Shadow that tracks the flip, peaking with the leaf edge-on and gone by the time it lands
- Decelerating rolls: each flap is slower than the last, so cells ease into their destination instead of ticking uniformly
- Per-cell stagger across rows and columns, resolving the board as a wave from the top-left corner
- Overshoot-and-settle on the final flap, tuned to read as mechanical rather than bouncy
- Light sweep across the board as the last cell lands, switchable with one attribute
- Shuffle control that re-flips every cell to a fresh destination, with alternate strings set per row
- Cells are generated from the text in your markup, so screen readers read the real text and JS-off leaves plain styled type
Perfect For
- Agency and studio landing pages with a departures-board hero that resolves as you scroll to it
- Stat and metrics strips where the numbers should feel mechanically counted, not faded in
- Live status and availability rows on product or service pages, with wording that can change
- Event, travel and venue sites wanting genuine departure-board character rather than a stock counter
- Portfolio and case-study intros needing one memorable, repeatable interaction above the fold
How It Works
Each character becomes a cell of four absolutely positioned glyph layers clipped with clip-path: two static halves, plus a leaf carrying a front face (the outgoing character's top half) and a back face (the incoming character's bottom half, pre-rotated 180 degrees in CSS). One continuous rotationX from 0 to -180 therefore lands the incoming character upright over the bottom half, exactly like the hardware.
Every cell's roll is a single gsap.timeline() with one tween per flap. That tween animates a proxy value and drives both response channels through gsap.quickSetter: the leaf's rotationX and the opacity of the shade over the lower half, which follows a sine curve so it peaks mid-flip. Per-flap durations follow a cubic ramp for the deceleration, and the last flap uses back.out so the leaf overshoots its stop and settles.
A master timeline positions each cell's roll at rowIndex plus columnIndex offsets to build the wave, rewrites the hidden screen-reader mirrors on completion, and fires the glint sweep. ScrollTrigger (once) or a delayed call kicks off the first resolve, and gsap.matchMedia routes reduced-motion visitors to the plain text that shipped in the HTML.