All projects · UI Components & Interactions
FlowScroll — Scroll-Reveal System
A single-page scroll-reveal marketing site where an IntersectionObserver tracks which section owns the viewport and drives a synchronized side-nav…
A single-page scroll-reveal marketing site where an IntersectionObserver tracks which section owns the viewport and drives a synchronized side-nav highlight, a fade-swapping floating CTA, and staggered content reveal animations. The active section becomes the single source of truth the whole UI reacts to.
- Dual IntersectionObserver architecture — one for active-section tracking via visibility-ratio map, one for one-shot reveal animations
- Floating contextual CTA whose label and icon fade-swap per section from data attributes
- Auto-built vertical side-nav generated from section metadata with smooth-scroll navigation
- Staggered nth-child reveal choreography on section entry
Built with: HTML, CSS, Vanilla JavaScript, IntersectionObserver API, CSS transitions/cubic-bezier, Google Fonts (Sora/Outfit), Inline SVG icons