WBL effects shelf · batch 3 (GSAP) · #06

Grid / list switch

A Grid / List toggle on a services or menu block: every card glides to its new place instead of jumping.

✓ OK to use Not on the never list: runs only on a tap and never hides anything; with reduced motion it just switches.

Best for: Restaurants (menu as photos or as a price list), salons with long menus, multi-service trades.
How: Flip.getState → toggle a class → Flip.from (nested, width/height so text never stretches). Without JS: the grid, toggle hidden.
Weight: 1.4 KB gzipped (our CSS + JS) + GSAP from jsDelivr: GSAP core 28.3 + Flip 9.7 KB gzipped. Plugins: Flip.

Services

Drain clearingSame day$149
Water heaterIn a day$1,450
Bathroom refit1-2 weeksfrom $8,500
AC tune-up1 hour$119
Duct resealHalf a day$480
Sofa clean2 hours$160