Instagram/WhatsApp Stories have a signature UI: those segmented bars across the top, one filling at a time. It looks fancy but it's a simple pattern. Here's a live, tappable rebuild in vanilla JS + CSS.
📸 Try it (tap left/right, hold to pause): https://dev48v.infy.uk/design/day17-instagram-stories.html
The segmented bar
One bar per story. The rule: only the active segment animates its width 0→100%; segments before it are full, segments after are empty. When the active one completes, advance to the next and reset the rule.
Driving the fill
A single requestAnimationFrame loop tracks elapsed time vs the per-story duration (~4s) and sets the active bar's width. On completion → next story.
The interactions that sell it
- Tap the right half = next, left half = previous (split the screen into two zones).
-
Press-and-hold = pause (
pointerdownpauses the timer,pointerupresumes) — so users can actually read. - Reset past/future segment states whenever you jump.
Why rAF over CSS animation
A timer loop makes pause/resume and tap-to-skip trivial — you control the clock. Pure CSS animations are harder to interrupt mid-fill.
🔨 Full build (segments → animate active → advance → tap zones → hold-to-pause) on the page: https://dev48v.infy.uk/design/day17-instagram-stories.html
Part of DesignFromZero. 🌐 https://dev48v.infy.uk
Top comments (0)