Motion in React

on YouTube ↗23m

" summary

Compares concrete implementations: use CSS transitions/keyframes for simple cases and keep to opacity/transform for performance; use requestAnimationFrame when you need JS control; Netflix TV UI forces JavaScript-only animation so experiments prioritize image prioritization and 3D render hooks; demonstrates libraries and patterns — Popmotion for ref-based imperative anims, react-pose (with styled-components) or react-motion for component-driven springs, mentions Web Animations API and Houdini as emerging low-level browser tools.

AI-written summary · about

" chapters (11)

1. 0:00Start
2. 1:39TOOLS & MOTION DESIGN SEEM VERY FAR APART
3. 2:13USERS AND USABILITY
4. 3:33Environment Language Framework Library YOUR Code!
5. 3:50ENVIRONMENT determines your rendering engine, languages, and capabilities
6. 8:14Complex interactions across user behavior, multiple components and data sources
7. 15:42IN REACT, WE CARE ABOUT Composition and Abstraction
8. 17:06WHAT DO WE NEED REACT FOR? Composition and Abstraction
9. 20:03Animating with Styled Components + React Pose
10. 21:00Have motion be part of your design spec
11. 21:20Have a framework for introducing frameworks

" related talks

• 17mMotion in ReactKaylie Alexa Kwon · ReactNext 2018
• 55mAnimations in a World of StatesAlexey Taktarov · HolyJS 2017
• 25mProgressive Web AnimationsAlexandra Holachek · React Conf 2019
• 18mReact Animation Made EasyWill Johnson · React Miami 2022
• 44mPractical Web AnimationLisi Linhart · Pixel Pioneers Bristol 2019
• 31mAnimating the Virtual DOMSarah Drasner · ReactEurope 2017
• 31mState of React (animations)John Adetutu · ReactEurope 2020
• 39mThe Future of Web AnimationSarah Drasner · DinosaurJS 2019