Vibe Design Reference v1

Home / Scroll & Animation

Chapter 02 · 38 entries

Scroll & Animation.

What separates a static website from an experience. Used well, these techniques guide attention, reveal content at the right moment, and make a site feel premium. Used poorly, they're just distracting.

Parallax Scrolling

Layers scrolling at different speeds create depth — like looking through a window.

Scroll-triggered animation

IntersectionObserver fade-up reveals. The most common modern web animation.

Horizontal scroll sections

Vertical scroll moves content sideways. GSAP ScrollTrigger pin + scrub.

Sticky sections / pinning

A visual stays put while feature blocks scroll past — Notion / Linear style.

Text reveal on scroll

Words and characters animate in one by one. SplitType + GSAP.

Scroll progress indicator

Top-of-page bar that fills as the user reads. Medium-style.

Smooth scroll / Lenis

Physics-based momentum scrolling. The "buttery feel" of modern sites.

Magnetic / Custom Cursor

Custom dot replaces native cursor — grows on links, snaps onto CTAs.

3D Card Tilt on Hover

Cards tilt toward the cursor in 3D. Apple-product-page energy.

Animated Number Counter

Stats count from zero when they enter view. The "by the numbers" moment.

Sticky Stacking Cards

Cards pin to the top, next card stacks on top. Apple-product-page energy.

Clip-Path Image Reveal

Image pushes through a horizontal slit while zooming out. Cinematic.

SVG Path Drawing

Underlines, signatures, charts, logos that draw themselves on scroll.

Infinite horizontal text scroll. Three bands at different speeds and sizes.

Hover Image Preview

Link list with cursor-tracking preview image. Agency-portfolio signature.

Page Loader / Transition

Counter 0→100 curtain that lifts to reveal the site. Choreographed reveal.

Exploded Assembly

Device pulls itself apart layer-by-layer in 3D, then snaps back together.

Image Sequence Scrub

Frame-by-frame playback tied to scroll. Apple AirPods rotation pattern.

3D Rotate on Scroll

Real CSS 3D cube rotates fully on X and Y axes tied to scroll.

Cinematic Pin & Zoom

Huge outlined word shrinks while a glowing orb emerges from inside.

Cross-section Reveal

Tilted cake-slice layers separate vertically with material labels fading in.

Section Color Morph

Page background, navbar, accent all morph as each section enters view.

SVG Path Follow

Element travels a winding curve; waypoints light up; path draws behind.

Globe / Planet Rotation

CSS sphere rotates with orbiting city labels. Stripe Atlas energy.

Hand-off Transition

Same product element morphs between 3 scenes — shared-element on the web.

Phone Screen Sync

Phone frame pinned, inner screen scrolls through app views as you scroll.

SVG blob path interpolates between 4 organic shapes on scroll.

Tilted deck of cards fans out into a row, then collapses back.

Camera Dolly Parallax

Multi-depth landscape pushes forward in Z — true 3D parallax with perspective.

Iris / Aperture Reveal

Six camera-shutter blades open from center exposing the scene behind.

Four paper panels hinge open from a folded crane to a flat sheet.

Particle Assembly

Hundreds of canvas sparks coalesce into a word, then disperse.

Clockwork Gears

Four interlocking gears + clock face turning at different speeds and directions.

Filmstrip Scrub

8-frame 35mm filmstrip passes horizontally through a projector gate.

Door / Panel Open

Two riveted vault doors slide apart with a beam of warm light spilling out.

Type Shatter & Reform

Headline letters fly apart in 3D space, then snap back into formation.

Animated Mask Wipe

Clip-path animates between two full-bleed scenes — diagonal / circle / bars.

Book Open / Page Turn

A 3D book opens its cover then turns a page in mid-scroll. Editorial / library.