WBL effects library · batch 2 (GSAP) · #08

Header call handoff

The header's round phone button grows into a full "Call (number)" pill once the hero's big Call button scrolls away.

Scroll this page: once the orange button above leaves the screen, the round phone button in the header grows into the full pill. The mini phone further down shows the same thing on a phone layout.

Use it for: Every CALL business (plumbers, HVAC, locksmiths, towing, cleaners); BOOK ("Book now") and VISIT ("Order") too.
When: Desktop and phone headers. On phones it pairs with, or replaces, batch 1's bottom call bar: pick one.
Don't: Running it together with the batch 1 call bar on the same phone page (two call buttons), or using it for a non-primary action.
How: IntersectionObserver watches the hero button; GSAP animates a clip-path on a pill that always keeps its full width, so nothing in the header ever moves (CLS 0). Core GSAP only.
Weight: 1.5 KB gzipped (our CSS + JS) + GSAP from jsDelivr: GSAP core 28.3 KB gzipped (shared by every effect on the page). Plugins: none (core only).

Harbor Line(555) 014-2290

24/7 plumbing

Burst pipe? A plumber at your door in 60 minutes.

Call (555) 014-2290

Scroll inside this phone ↓

Water heaters

Tank and tankless, most swaps the same day.

Drains

Camera inspection first, so you see the problem too.

Leaks

Found with a moisture meter, not by opening walls.

Prices up front

Agreed before any work starts. No overtime on weekends.