A sleek view transitions recipe for web apps
summary
Shows how per-route custom animations come from using React Router + React Transition Group + unique key per route to force unmount/remount, and GSAP timelines to play different animations (home staggers lines, about/out slide). Tries double requestAnimationFrame and will-change tweaks, profiles with DevTools to find animations firing while the browser still parses DOM, then fixes it by delaying play behind a global "load" promise so animations start after load. Solution runs in production and removes the earlier jank.
AI-written summary · about
chapters (7)
- 0:00Introduction and speaker intro
- 1:24Routing in React apps
- 3:51React Transition Group basics
- 7:00Custom transitions per route
- 10:12Kicking off transitions on first load
- 18:43Performance tips and takeaways
- 20:29Resources and conclusion
