Interactive Storytelling Capabilities
A designer showcase of the animation and data-visualisation components available for Chayn's scrollytelling reports. Scroll through each section to explore the interactions.
Pull Quote
Full-width typographic moments for key findings. Rendered as a Server Component — zero JavaScript shipped.
“Technology-facilitated abuse doesn't exist in isolation — it is embedded in broader systems of power, control, and inequality.”
Animated Statistics
Numbers count up from zero as the reader scrolls into view. Powered by GSAP ScrollTrigger with stagger support.
Animated Bar Chart
Horizontal bars animate in on scroll using GSAP ScrollTrigger. Data values and labels are driven by translations.
Trend Area Chart
A trend line and filled area that draws from left to right on scroll. Uses Visx area/line shapes with a GSAP clip-path animation and LinearGradient fill.
Interactive Map
World map using Visx's Mercator projection. Highlighted countries respond to hover and focus with contextual callouts.
Audio Narration
Audio clips via Howler.js with an animated waveform indicator. Play button toggles state; waveform responds in real time with GSAP.
Horizontal Scroll Cards
Full-width swipeable moments using CSS scroll-snap. Each card is a bold statistic — suitable for survivor snippets or key data points.
Sticky Scroll Narrative
The core scrollytelling pattern. A visual panel sticks on the left while narrative chapters scroll on the right. The stat and background update at each chapter boundary — driven by GSAP ScrollTrigger. On mobile, stats appear inline above each chapter.
Horizontal Scroll (scroll-driven)
Vertical scrolling drives horizontal content movement. The outer container height is computed in JS to match the track's pixel width exactly, so the last panel lands precisely when the section exits. GSAP scrubs the track's x-position against the scroll distance. Each panel is a full-screen editorial moment.