Observer Fullpage Sections — Free GSAP Snippet

Fullpage section navigation — one wheel flick or swipe advances one full-screen slide — is the awwwards-site pattern that normal scrolling can't express, because the page doesn't actually scroll. This snippet builds it with GSAP's Observer plugin: sections are absolutely stacked, the document has zero scroll height, and every input gesture is translated into a single "go up / go down" intent that plays an animated hand-off.

Observer is input normalization, not scrolling

Observer.create({ type: 'wheel,touch,pointer' }) listens to mouse wheels, trackpad gestures, touch swipes, and pointer drags, and distills them into onUp/onDown callbacks (note the inversion: swiping *up* means the user wants to go *down* the deck, so onUp advances). Wheels report line deltas, trackpads flood pixel deltas, touch is positional — Observer absorbs those differences so navigation logic is two lines. preventDefault: true stops any native scrolling or overscroll bounce from leaking through.

tolerance filters intent from noise

tolerance: 12 requires 12px of accumulated movement before a callback fires — the difference between "resting a finger" and "swiping." Combined with the animating lock, one physical gesture maps to exactly one section change: trackpads that emit dozens of momentum events after a flick can't machine-gun through the deck, because everything during the transition is ignored and the residual momentum falls below tolerance by completion.

The hand-off is layered, not a plain slide

The incoming section slides from full viewport height while the outgoing one moves only −18% and dims — a parallax depth cue that reads as the new section sliding *over* the old, like sheets of paper. The incoming section's inner content also travels 40% further with a fade, arriving slightly after its background (that 0.25 offset), which gives every transition a two-plane richness one flat slide lacks. z-index is set per transition so the mover is always on top, and visibility gates which sections exist to the compositor at all.

Direction is a parameter, so reverse is free

goto(index, dir) takes the travel direction (+1/−1) and multiplies every yPercent by it: downward navigation slides sections up from below; upward navigation replays the identical choreography mirrored. One function handles both, and the boundary guard (index < 0 || index >= length) makes the deck's ends dead-stop naturally.

Why sections are stacked, not in a scroll container

With position: absolute; inset: 0 on every section and overflow: hidden on the page, there is no scroll position to manage, no snap points to fight, and no scrollbar to distract — state is just the current integer. This differs fundamentally from CSS scroll-snap (see full page scroll): snap keeps native scrolling and its physics; Observer replaces scrolling with *staged transitions* you fully choreograph.

Dots are generated and synced

The rail builds one dot per section at init and goto() swaps the active class, stretching the current dot into a pill — the only affordance revealing deck position, echoing the scroll sticky features pattern.

Customizing it

Retheme via each section's --sb/--sa variables, swap the hand-off for crossfades or horizontal slides (change the axis), or add keyboard arrows by calling goto() from a keydown listener. Related: snap-based full page scroll, pinned deck effects in scroll fade stack, and section-travel dots in page dots nav.