Creating CSS animations in React

CSS animations (when used correctly) can add life to your website and engage users. In this talk we will explore a simple animation built on pure CSS and HTML, and how to make the code cleaner and more extensible using React and Emotion.

Transcript

1. ✨
   CSS animations in React
   Wendy Kong
   Software Developer, Pulsifi
   

   View Slide

2. How to use CSS animation properties
   CSS animations
   React
   Add animations to React components
   

   View Slide

3. When do we need
   animations?
   

   View Slide

4. User: What’s happening?
   User: ...oh ok, something is loading.
   Loading cat by domaso https://dribbble.com/shots/3197970-Loading-cat
   

   View Slide

5. 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
   

   View Slide

6. Twitter’s Like button
   User: Whee!
   

   View Slide

7. 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
   

   View Slide

8. 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
   

   View Slide

9. DEMO
   vs Transition
   Animation
   

   View Slide

10. People taking
    CSS animations
    to the next level
    

    View Slide

11. Alex the CSS Husky
    by David Khourshid (davidkpiano)
    https://codepen.io/davidkpiano/pen/wMqXea (works in Chrome)
    

    View Slide

12. https://codepen.io/ste-vg/pen/oKYjKV
    Clip Clop Clippity Clop
    by Steve Gardner (steevg)
    

    View Slide

13. animation: descend 5s infinite;
    

    View Slide

14. animation-name: descend;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    

    View Slide

15. Let’s use
    ALL THE PROPERTIES
    

    View Slide

16. animation-name
    animation-duration
    animation-timing-function
    animation-delay
    animation-iteration-count
    animation-direction
    animation-fill-mode
    animation-play-state
    

    View Slide

17. 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
    

    View Slide

18. Cubic Bezier
    https://cubic-bezier.com
    

    View Slide

19. Animating the clinic guys
    A two part story
    

    View Slide

20. Chapter 1
    Jaded by sassy pugs
    

    View Slide

21. Chapter 2
    An emotional reaction
    

    View Slide

22. Some
    considerations
    

    View Slide

23. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
    163
    animatable
    properties
    Gotta animate them all….?
    

    View Slide

24. https://developer.mozilla.org/en-US/docs/Learn/Performance/Animation_performance_and_frame_rate
    https://csstriggers.com
    

    View Slide

25. https://doraemon-css-perf.netlify.com
    I just
    want to
    relax ~
    

    View Slide

26. Browser support
    

    View Slide

27. 
    Thank you
    Go forth and make cool stuff
    @wendko
    

    View Slide