2025 10 04 32 KATERYNA PORSHNIEVA CONGRESO REACT ALICANTE The international React js conference i
summary
Covers concrete claims and tools: CSS transitions, transforms and keyframes for cheap GPU animations; view transitions as a browser API (Chrome and new Safari supported, Firefox coming) with React and React Router integration; spring physics via motion (framer motion) for interruptible layout animations and layoutId shared transitions; accessibility via prefers-reduced-motion and a rule of thumb of 0–200ms for small actions 400–600ms for larger ones; promises “20% of the information to get you 80% there.”
AI-written summary · about
chapters (33)
- 0:00Introduction
- 1:36Meet the speaker
- 2:40Why animation matters
- 5:07CSS transitions basics
- 6:12CSS transforms mastery
- 9:43Smooth animation tips
- 11:54Timing functions guide
- 13:41Custom easing tools
- 14:46Easing for interactions
- 16:33Keyframes for multi-step animations
- 17:57Jiggle animations
- 18:38Staggering with fill modes
- 20:03Animation accessibility
- 22:11View Transitions API
- 23:32View Transitions in JS
- 24:56View Transitions in React
- 25:38Customizing View Transitions
- 26:38Morphing elements
- 28:01Accessibility in View Transitions
- 29:05Animating lists
- 30:09React View Transition support
- 31:36Tween limitations
- 32:19Spring animations
- 33:45Framer Motion intro
- 34:29Spring basics with Framer
- 35:55Layout animations
- 37:23Fixing layout issues
- 38:25Spring physics config
- 40:55Accessible Framer Motion
- 41:39Animating SVGs for delightful UIs
- 43:44Animation resources
- 44:25Choosing animation approach
- 45:29Q&A
