Save Wildlife
About the Project
An immersive scrollytelling editorial platform designed for a global conservation non-profit to drive public engagement and raise funds. The platform translates complex ecological datasets and species migration coordinates into interactive maps, cinematic scroll transitions, and spatial audio backdrops. By combining storytelling with data visualization, we transformed cold statistics into a highly moving, interactive reading journey that connects users directly to wildlife protection zones.
The Challenge
The client required full-resolution photography, embedded video backdrops, and interactive scroll triggers on every section. However, compiling these media assets caused Google Lighthouse Core Web Vitals to plummet, specifically on Largest Contentful Paint (LCP) and Interaction to Next Paint (INP). Standard lazy-loading broke GSAP ScrollTrigger's offset calculations, leading to jumpy scroll jumps and elements overlapping during fast scrolling.
The Solution
I implemented an advanced pre-fetching and progressive image enhancement pipeline, converting high-res assets to WebP/AVIF formats and utilizing low-quality image placeholders (LQIP). I resolved the GSAP layout shifts by binding an event listener to media load states, executing dynamic ScrollTrigger.refresh() recalculations once images/videos loaded. Finally, I offloaded heavy canvas scrollytelling computations to CSS-transform-accelerated layers, boosting the Lighthouse performance score from 48 to 96.
Technologies Used
