Create Engaging "Scrollytelling" Experiences with React & GSAP
summary
Shows a working approach: React plus GSAP ScrollTrigger drives scroll-controlled timelines, React Three Fiber renders 3D models, and pinned sections plus parallax are implemented. Introduces Basement Scrolltelling, an open source thin abstraction that replaces GSAP durations with explicit start/end ranges, handles timeline creation and cleanup, and keeps most UI as React server components. Demo claims a concrete win — Replay site sees a 24% increase in user interaction after launch.
AI-written summary · about
chapters (11)
- 0:00Introduction
- 1:24What is scrollytelling
- 3:58Advantages of scroll-based storytelling
- 5:22Real-world examples
- 7:32Challenges in scrollytelling
- 8:14GSAP and ScrollTrigger
- 10:41Basement Scrollytelling library
- 11:22Key features
- 13:30Live demo
- 16:23Code walkthrough
- 19:58Closing remarks
related talks
53mScroll-Enhanced Experiences
36mScroll-Driven Animations with CSS
22mA sleek view transitions recipe for web apps
36mBlasting React into Space: Building fluid interface swith React and WebGL
31mAnimating the Virtual DOM
43mAnimating in React
29mScroll linked Animations with CSS
01h 04mLiven up your websites with Scroll-Driven Animations & View Transitions