Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Creating CSS animations in React

Wendy Kong
September 26, 2019

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.

Wendy Kong

September 26, 2019
Tweet

More Decks by Wendy Kong

Other Decks in Technology

Transcript


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

    View full-size slide

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

    View full-size slide

  3. When do we need
    animations?

    View full-size slide

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

    View full-size 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 full-size slide

  6. Twitter’s Like button
    User: Whee!

    View full-size 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 full-size 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 full-size slide

  9. DEMO
    vs Transition
    Animation

    View full-size slide

  10. People taking
    CSS animations
    to the next level

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. animation: descend 5s infinite;

    View full-size slide

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

    View full-size slide

  15. Let’s use
    ALL THE PROPERTIES

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

  19. Animating the clinic guys
    A two part story

    View full-size slide

  20. Chapter 1
    Jaded by sassy pugs

    View full-size slide

  21. Chapter 2
    An emotional reaction

    View full-size slide

  22. Some
    considerations

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. Browser support

    View full-size slide


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

    View full-size slide