Each effect in this series is a direct implementation of a technique used by award-winning interactive websites — rebuilt in pure React with zero external animation libraries.
NICHE FACTGSAP ScrollTrigger's "scrub" parameter accepts a number (e.g. scrub: 1.5) that acts as a lag factor in seconds — the animation chases the scroll position with that much inertia, creating the silky feel used by Awwwards Site of the Day winners. This series replicates that behavior using native scroll events and CSS transitions.GSAP's scrub: 1.5 adds inertia — animation chases scroll with a 1.5s lag. We replicate this with native scroll events + CSS transitions.
Inspired by the Norwegian Salvation Army's "Julie's Story" — a scrollytelling experience that earned Awwwards recognition for using progressive narrative revelation to build emotional investment. Each chapter is tied directly to scroll position, not time.
The canvas stays fixed while the outer container scrolls. CSS position: sticky + a tall parent div creates the illusion of scroll-driven animation.
Scroll position is normalized to a 0→1 value using getBoundingClientRect(). Each chapter occupies a slice of that range — no GSAP required.
SVG buildings move at different speeds (0.2× to 0.65× scroll rate) creating depth. This is the same multi-speed parallax used in the Norwegian Salvation Army cityscape.
Each chapter card fades in as its range begins and fades out as the next begins. The opacity is a direct function of scroll progress — frame-perfect at any scroll speed.
Each letter is rasterized into pixel-sampled particles that scatter to random positions, then spring-assemble on scroll-enter using Hooke's Law (F = -kx). Hover to explode; mouse-leave to reassemble. Spring constant k=0.07 produces the elastic-yet-snappy feel used in Apple's launch animations and high-end motion graphics.
Inspired by Bragg Live Foods (Willa Creative, Site of Sites). Shopping as discovery — each channel reveals itself through interaction, not description.
Inspired by John Stejskal's Solar Journey (Awwwards Honorable Mention). Click any planet to fly there — scale becomes intuitive when you experience the journey.
Inspired by Dave Holloway's portfolio (Awwwards Honorable Mention). Every cursor movement triggers visual feedback — the interface feels alive before you see a single case study.