Download - Animations in React
ANIMATIONS IN REACT@JENKLIU
OBJECTIVES
▸ Share how Quizlet built animations for Gravity in React
▸ Evaluate tradeoffs between animation strategies
BACKGROUND
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
WHY ARE ANIMATIONS HARD?
▸ Virtual DOM is a black box
▸ Fine-grained timing is not under our control 😱
▸ ReactCSSTransitionGroup has limitations
I. ASTEROIDS FALLING DOWNWARDS
‣ React Tween State
REACT TWEEN STATE
▸ “The equivalent of React's this.setState, but for animated tweens: this.tweenState.”
II. A PLANET ZOOMING IN FROM AFAR
‣ CSS transitions
‣ VelocityJS
‣ React Motion
CSS TRANSITIONS
ANIMATING POSITION PROPERTIES: WHICH IS BETTER?
WHY CSS TRANSITIONS?
▸ Declarative
▸ Performant
▸ Off the main thread
▸ Hardware acceleration
▸ Separate layers
WHY NOT?
▸ Can’t start/stop
▸ Limited to CSS environment
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
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
III. A BADGE FADING/ZOOMING IN AND OUT
‣ ReactCSSTransitionGroup
‣ CSS keyframe animations
REACTCSSTRANSITIONGROUP
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?
CSS ANIMATIONS
▸ Provide control over individual keyframes
▸ Allow you to animate multiple properties in a sequence
THE BADGE ANIMATION WITH CSS ANIMATIONS
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
FINAL THOUGHTS
▸ Animations are hard
▸ Building involves iteration
▸ Performance testing is key
▸ The React community is awesome
▸ We’re hiring! quizlet.com/jobs
@jenkliu