Published April 2, 20255 min readSaman Sahraei

Scroll-Driven UI Without Jank

Lenis, GSAP ScrollTrigger, and the discipline of animating only transform and opacity.

GSAPAnimationPerformance

Scroll animations go wrong when they fight the browser. Layout thrashing, scroll jank, and main-thread clustering all come from the same mistake: animating properties that trigger reflow.

Lenis owns scroll; GSAP owns time

Lenis smooths wheel input into native scroll. GSAP reads that scroll via ScrollTrigger and drives transforms. The two systems stay in sync through a single ticker instead of competing proxies.

Animate transform and opacity only
matchMedia for reduced-motion fallbacks
Section ids that match navigation and progress rails
Kill timelines on unmount to prevent memory leaks

Motion should explain structure, not decorate it.

More notes

November 12, 2025

Tile-Based Caching for Interactive Maps

How square tile keys, spatial caches, and zoom-aware fetching keep dense vendor maps responsive without blocking the UI thread.

October 3, 2025

React Query Patterns for Live Portfolio Demos

Stale times, refetch intervals, and optimistic UI for dashboards that look alive without pretending to be production infrastructure.

August 21, 2025

GPU-Friendly Overlays on Top of MapLibre

Synchronising Three.js with MapLibre, instancing markers, and keeping 60 FPS when the camera moves.