NavigationPro

4 effects for the navigation family · every one loops · pure CSS unless a card says otherwise

The previews are open to everyone; the code of these effects comes with WunderUI Core and Pro.

All playing

A travelling scale wave. In production the scale comes from the pointer distance.

Pure CSSNavigation

Real version: animation-timeline: scroll(root). Zero JavaScript, runs off the main thread.

Pure CSSNavigation

In production this rides animation-timeline: view() — no scroll listener.

Pure CSSNavigation

The header shrinks over the first 120 px of scroll and gains its shadow only then.

Modern CSSNavigation