animations in react
TRANSCRIPT
![Page 1: Animations in React](https://reader031.vdocuments.us/reader031/viewer/2022021918/58879c481a28ab5b1a8b6d33/html5/thumbnails/1.jpg)
ANIMATIONS IN REACT@JENKLIU
![Page 2: Animations in React](https://reader031.vdocuments.us/reader031/viewer/2022021918/58879c481a28ab5b1a8b6d33/html5/thumbnails/2.jpg)
OBJECTIVES
▸ Share how Quizlet built animations for Gravity in React
▸ Evaluate tradeoffs between animation strategies
![Page 3: Animations in React](https://reader031.vdocuments.us/reader031/viewer/2022021918/58879c481a28ab5b1a8b6d33/html5/thumbnails/3.jpg)
BACKGROUND
![Page 4: Animations in React](https://reader031.vdocuments.us/reader031/viewer/2022021918/58879c481a28ab5b1a8b6d33/html5/thumbnails/4.jpg)
![Page 5: Animations in React](https://reader031.vdocuments.us/reader031/viewer/2022021918/58879c481a28ab5b1a8b6d33/html5/thumbnails/5.jpg)
ANIMATIONS WE’LL EXPLORE
▸ I. Asteroids falling
▸ React Tween State
▸ II. Planets moving on level up
▸ CSS transitions
▸ Velocity JS
▸ React Motion
▸ III. Badge zooming in & out on level up
▸ ReactCSSTransitionGroup
▸ CSS animations
![Page 6: Animations in React](https://reader031.vdocuments.us/reader031/viewer/2022021918/58879c481a28ab5b1a8b6d33/html5/thumbnails/6.jpg)
WHY ARE ANIMATIONS HARD?
▸ Virtual DOM is a black box
▸ Fine-grained timing is not under our control 😱
▸ ReactCSSTransitionGroup has limitations
![Page 7: Animations in React](https://reader031.vdocuments.us/reader031/viewer/2022021918/58879c481a28ab5b1a8b6d33/html5/thumbnails/7.jpg)
I. ASTEROIDS FALLING DOWNWARDS
‣ React Tween State
![Page 8: Animations in React](https://reader031.vdocuments.us/reader031/viewer/2022021918/58879c481a28ab5b1a8b6d33/html5/thumbnails/8.jpg)
REACT TWEEN STATE
▸ “The equivalent of React's this.setState, but for animated tweens: this.tweenState.”
![Page 9: Animations in React](https://reader031.vdocuments.us/reader031/viewer/2022021918/58879c481a28ab5b1a8b6d33/html5/thumbnails/9.jpg)
II. A PLANET ZOOMING IN FROM AFAR
‣ CSS transitions
‣ VelocityJS
‣ React Motion
![Page 10: Animations in React](https://reader031.vdocuments.us/reader031/viewer/2022021918/58879c481a28ab5b1a8b6d33/html5/thumbnails/10.jpg)
CSS TRANSITIONS
![Page 11: Animations in React](https://reader031.vdocuments.us/reader031/viewer/2022021918/58879c481a28ab5b1a8b6d33/html5/thumbnails/11.jpg)
ANIMATING POSITION PROPERTIES: WHICH IS BETTER?
![Page 12: Animations in React](https://reader031.vdocuments.us/reader031/viewer/2022021918/58879c481a28ab5b1a8b6d33/html5/thumbnails/12.jpg)
WHY CSS TRANSITIONS?
▸ Declarative
▸ Performant
▸ Off the main thread
▸ Hardware acceleration
▸ Separate layers
WHY NOT?
▸ Can’t start/stop
▸ Limited to CSS environment
![Page 13: Animations in React](https://reader031.vdocuments.us/reader031/viewer/2022021918/58879c481a28ab5b1a8b6d33/html5/thumbnails/13.jpg)
VELOCITYJS
▸ Power of CSS animations in Javascript
▸ Similar API to jQuery’s $.animate()
▸ Good performance from caching/DOM synchronization
▸ More control over properties e.g. position/size
▸ Fancy other features like chaining
![Page 14: Animations in React](https://reader031.vdocuments.us/reader031/viewer/2022021918/58879c481a28ab5b1a8b6d33/html5/thumbnails/14.jpg)
REACT-MOTION
▸ “Set up a stiffness and damping for your UI element, and let the magic of physics take care of the rest.”
▸ Pro: more realistic feel
▸ Con: can’t set a duration
![Page 15: Animations in React](https://reader031.vdocuments.us/reader031/viewer/2022021918/58879c481a28ab5b1a8b6d33/html5/thumbnails/15.jpg)
III. A BADGE FADING/ZOOMING IN AND OUT
‣ ReactCSSTransitionGroup
‣ CSS keyframe animations
![Page 16: Animations in React](https://reader031.vdocuments.us/reader031/viewer/2022021918/58879c481a28ab5b1a8b6d33/html5/thumbnails/16.jpg)
REACTCSSTRANSITIONGROUP
![Page 17: Animations in React](https://reader031.vdocuments.us/reader031/viewer/2022021918/58879c481a28ab5b1a8b6d33/html5/thumbnails/17.jpg)
REACTCSSTRANSITIONGROUP
▸ For transitioning in OR out of the DOM, not both in succession
▸ Try going more low-level: ReactTransitionGroup
▸ Or: what if we don’t need to remove the badge from the DOM?
![Page 18: Animations in React](https://reader031.vdocuments.us/reader031/viewer/2022021918/58879c481a28ab5b1a8b6d33/html5/thumbnails/18.jpg)
CSS ANIMATIONS
▸ Provide control over individual keyframes
▸ Allow you to animate multiple properties in a sequence
![Page 19: Animations in React](https://reader031.vdocuments.us/reader031/viewer/2022021918/58879c481a28ab5b1a8b6d33/html5/thumbnails/19.jpg)
THE BADGE ANIMATION WITH CSS ANIMATIONS
![Page 20: Animations in React](https://reader031.vdocuments.us/reader031/viewer/2022021918/58879c481a28ab5b1a8b6d33/html5/thumbnails/20.jpg)
SUMMARY OF TECHNIQUES
▸ CSS for animations without dynamic control/interactivity
▸ CSS transitions for one-shot animations
▸ CSS animations for multi-step animations
▸ ReactCSSTransitionGroup for animating in and out of the DOM
▸ JS for animations that require dynamic control/interactivity
▸ React Tween State for simple controlled animations
▸ VelocityJS for dynamic animations with elaborate control
▸ React Motion for realistic animations
![Page 21: Animations in React](https://reader031.vdocuments.us/reader031/viewer/2022021918/58879c481a28ab5b1a8b6d33/html5/thumbnails/21.jpg)
FINAL THOUGHTS
▸ Animations are hard
▸ Building involves iteration
▸ Performance testing is key
▸ The React community is awesome
▸ We’re hiring! quizlet.com/jobs
@jenkliu