A sleek VIEW TRANSITIONS RECIPE FOR WEB APPS
- Front end engineer in
Design Systems at Typeform
we are hiring...
- 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
ROUTING IN REACT
TRansitions IN REACT
CSS TRANSITIONS for multiple elements
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""
Move to next frame
Move Timeline to the next frame
Move to next frame after the next frame
Move Timeline after the next frame
[...] 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
Change animation method
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
[...] represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.
LOAD event with promises
PROFILE after the fix ✨
SHOULD you do this on your apps?
PLEASE, PROFILE YOUR APPLICATIONS
When an animation is happening nothing else should be happening
No animation is better than crappy animations
Test in slow and older devices
- Profile and base your improvements in metrics
- Repository with application using this approach
- Promise based initialization article
- react-router documentation on transitions
- react-transition-group documentation
A sleek view transitions recipe for web apps
By Jeremias Menichelli