✨
CSS animations in React
Wendy Kong
Software Developer, Pulsifi
Slide 2
Slide 2 text
How to use CSS animation properties
CSS animations
React
Add animations to React components
Slide 3
Slide 3 text
When do we need
animations?
Slide 4
Slide 4 text
User: What’s happening?
User: ...oh ok, something is loading.
Loading cat by domaso https://dribbble.com/shots/3197970-Loading-cat
Slide 5
Slide 5 text
User: What am I supposed to do?
User: ...oh, I need to scroll down.
Animated Scroll Indicator by Aaron C-T https://dribbble.com/shots/2292846
Slide 6
Slide 6 text
Twitter’s Like button
User: Whee!
Slide 7
Slide 7 text
CSS Animations is a module of CSS that
lets you animate the values of CSS
properties over time, using keyframes.
-MDN docs
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations
Slide 8
Slide 8 text
CSS Animations provide finer control over
animated properties.
CSS Transitions can trigger animations based on
user actions.
-MDN docs
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions
Slide 9
Slide 9 text
DEMO
vs Transition
Animation
Slide 10
Slide 10 text
People taking
CSS animations
to the next level
Slide 11
Slide 11 text
Alex the CSS Husky
by David Khourshid (davidkpiano)
https://codepen.io/davidkpiano/pen/wMqXea (works in Chrome)
Slide 12
Slide 12 text
https://codepen.io/ste-vg/pen/oKYjKV
Clip Clop Clippity Clop
by Steve Gardner (steevg)
Easing functions
specify the rate of change of a parameter
over time.
Objects in real life don’t just start and stop
instantly, and almost never move at a
constant speed.
https://easings.net/en
Slide 18
Slide 18 text
Cubic Bezier
https://cubic-bezier.com
Slide 19
Slide 19 text
Animating the clinic guys
A two part story
Slide 20
Slide 20 text
Chapter 1
Jaded by sassy pugs
Slide 21
Slide 21 text
Chapter 2
An emotional reaction
Slide 22
Slide 22 text
Some
considerations
Slide 23
Slide 23 text
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
163
animatable
properties
Gotta animate them all….?