Storytelling in the Age of JavaScript
summary
Claims that JavaScript can shape real narrative experiences get backed by concrete demos and metrics: live CodePen demos show SVG filters and a 6 KB loader, a Wall‑E character built in SVG, a chart written from scratch with Vue.js transitions, WebGL scenes like Pottermore and seat‑selection Canvas examples, and GreenSock tweens for cross‑browser animation. Measured effects include attention dropping after ~2 seconds, Amazon’s 1s → 7% conversion loss, Walmart’s 100ms → 1% revenue change, and humans overestimating passive wait by 36% so branded loaders double tolerated wait.
AI-written summary · about
chapters (57)
- 0:00Intro
- 0:45Agenda
- 1:26Why is storytelling important
- 2:19Journey maps
- 2:36Whats getting in our way
- 3:28The So What Factor
- 4:22User Experience
- 5:01User Journey
- 5:47Spatial Maps
- 6:34User Looks
- 6:55Parent to User
- 7:12Accessibility
- 7:52Docs and Guides
- 9:07Personality
- 11:03Clippy
- 11:29CodePen
- 12:09Smashing Magazine
- 13:36Walle
- 15:14Wait Times
- 15:48Anxiety
- 16:32SVG
- 18:06Checkout Loader
- 18:23Chris Gannon
- 18:37Code Pens
- 19:37Hints
- 20:19Timing
- 20:44JavaScript Area Error
- 21:02Timing interstitial modals
- 21:40Shame
- 22:08Spatial Awareness
- 22:50Web Tools
- 23:17SVG Filters
- 23:37SVG Filters Performance
- 24:37Seamless Transitions
- 26:05Inout modes
- 26:37Without inout modes
- 26:48HTML
- 27:28CSS
- 27:56View
- 28:53Reuse
- 29:17Watchers
- 29:50David Corr
- 31:32Canvas
- 32:30WebGL
- 33:11Code Drops
- 33:22Motion Design Language
- 34:10Motion vs Material Design
- 35:24Animation vs CSS
- 36:34Entrance Classes
- 37:14Animations
- 38:58Realtime Data
- 39:38Scrolling Telling
- 40:21Scrawly Telling
- 40:50What Do We Learn
- 41:31SVG Animations
- 41:43My Book
- 42:10Conclusion
