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