Insights from building rich animated experiences in React

Jeremias Menichelli

SUMMARY

  • Routing and views in React
     
  • React Transition Group API
     
  • Routing + custom transitions
     
  • Kicking off transitions from first load
     
  • Wrap-up and conclusions

ROUTING IN REACT WEB APPS

  • react-router-dom
     
    • BrowserRouter
       
    • Switch
       
    • Route

ROUTING IN REACT

TRansitions IN REACT

  • react-transition-group
     
    • TransitionGroup
       
    • CSSTransition
       
    • Transition

<CSStransition/> component

CSS TRANSITIONS for multiple elements

<TRANSITION/> COMPONENT

WHAT ABOUT CUSTOM TRANSITIONS?

me trying to make both new API work together

It can be done!

me after figuring it out

KICKING OFF TRANSITIONS

ON FIRST LOAD

""Hey, ANIMATION ON HOMEPAGE DOESN'T LOOK GOOD""

first try

Move to next frame

Request animation Frame

[...] tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint.

Jake Archibald, In the loop

https://www.youtube.com/watch?v=cCOL7MC4Pl0

Move Timeline to the next frame

NOPE

SECOND try

Move to next frame after the next frame

Move Timeline after the next frame

NOPE

THird try

Browser hints

WILL CHANGE

[...] provides a way for authors to hint browsers about the kind of changes to be expected on an element, so that the browser can set up appropriate optimizations ahead of time.

WILL CHANGE is a broken promise

FOURTH TRY

Change animation method

NOPE

FIFTH TRY

Let's profile the application in staging

PROFILE before the fix ⚡️

RUN ANIMATION AFTER LoaD EVENT

💩

Issues with this approach

  • Race condition, event might never fire
     
  • Not reusable without exposing internals
     
  • Browsers treat async and defer scripts differently

promises

[...] represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.

Patterns for a Promises based initialization

https://jeremenichelli.io/2016/04/patterns-for-a-promise-based-initialization/

LOAD a script with promises

LOAD a STYLESHEET with promises

💃🏽

LOAD event with promises

PROFILE after the fix ✨

SHOULD you do this on your apps?

NOPE

PLEASE, PROFILE YOUR APPLICATIONS

recommendations

  • When an animation is happening nothing else should be happening
     
  • No animation is better than crappy animations
     
  • Test in slow and older devices
     
  • Tweak your easings, durations and delays
     
  • Use CSS when possible
     
  • Profile and base your improvements in metrics

RESOURCES

THANKS

https://jeremenichelli.io
github.com/jeremenichelli
twitter.com/jeremenichelli

Made with Slides.com