Cheng Lou - The State of Animation in React at react-europe 2015

ReactEurope
2 HN recommenders · recommended in 2 months, 2015–2019
YouTube
138K views · 11 years ago · talk · intermediate · dated

Cheng Lou's react-europe 2015 talk on the state of animation in React on the web. He covers why animation is hard to do declaratively, shows demos such as chat heads and slow-motion tricks, and presents spring-based motion in place of time-based easing.

HN people call it a must-watch and name it a favorite tech talk for boiling UI animation down to a single idea, the spring.

“React-motion, the react animation package that boils all of the animations down to one concept, a spring.”
CSS & front-end design craftInteraction design
#react#animation#springs#react-motion#webanimation#uimotion

3 comments from Hacker News

s
@stoikerty2015 · in “React Animated API (Native for Now) and the State Animation in React (Web)”
"Cheng Lou - The State of Animation in React" This is a must-watch. Cheng talks about what animations in React on the Web currently look like and the complexities that arise when building it out. He shows a few demos, including chat-heads and some neat slow-motion tricks. ▶ this video --- "Spencer Ahrens - React Native: Building Fluid User Experiences" Spencer talks about the "Animated" API that currently landed for React Native. There is a mention that it's cross-platform (working on Android and iOS right now) and might be coming to the web soon (skip to @33min48s to get specifics). It's looking positive and he doesn't seem concerned about hitting "close parity" on the web. link --- React Native's new "Animated" API Docs link
Strongly recommendsView on HN
s
@superplussed2016 · in “Ask HN: What's your favorite tech talk?”
React-motion, the react animation package that boils all of the animations down to one concept, a spring. ▶ this video
RecommendsView on HN
d
@dsego2019 · in “Moxie: Incremental Declarative UI in Rust”
CSS animations are not enough for anything but simple transitions, since they are time based. Their behavior is also hard to control from JS. Check out this react animation library, which is based on springs for natural motion: react-spring.io (intro youtu.be/1tavDv5hXpo).
CitesView on HN