A sleek VIEW TRANSITIONS RECIPE FOR WEB APPS
Jeremias Menichelli
- Front end engineer in
Design Systems at Typeform
we are hiring...
https://www.typeform.com/careers/
- https://jeremenichelli.io
- github.com/jeremenichelli
- twitter.com/jeremenichelli
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
- BrowserRouter
ROUTING IN REACT
![](https://s3.amazonaws.com/media-p.slid.es/uploads/840752/images/5151585/carbon_11_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/840752/images/5201338/without_transitions.gif)
TRansitions IN REACT
- react-transition-group
- TransitionGroup
- CSSTrantision
- Transition
- TransitionGroup
<CSStransition/> component
![](https://s3.amazonaws.com/media-p.slid.es/uploads/840752/images/5151622/carbon_7_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/840752/images/5151623/carbon_10_.png)
CSS TRANSITIONS for multiple elements
![](https://s3.amazonaws.com/media-p.slid.es/uploads/840752/images/5153552/carbon_18_.png)
<TRANSITION/> COMPONENT
![](https://s3.amazonaws.com/media-p.slid.es/uploads/840752/images/5151633/carbon_9_.png)
WHAT ABOUT CUSTOM TRANSITIONS?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/840752/images/5145152/1.gif)
me trying to make both new API work together
It can be done!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/840752/images/5145159/2.gif)
me after figuring it out
![](https://s3.amazonaws.com/media-p.slid.es/uploads/840752/images/5201339/animated_transitions.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/840752/images/5184282/carbon.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/840752/images/5184283/carbon_3_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/840752/images/5184286/carbon_1_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/840752/images/5184288/carbon_2_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/840752/images/5184535/carbon_4_.png)
KICKING OFF TRANSITIONS
ON FIRST LOAD
""Hey, ANIMATION ON HOMEPAGE DOESN'T LOOK GOOD""
first try
Move to next frame
Move Timeline to the next frame
![](https://s3.amazonaws.com/media-p.slid.es/uploads/840752/images/5151639/carbon_1_.png)
NOPE
SECOND try
Move to next frame after the next frame
Move Timeline after the next frame
![](https://s3.amazonaws.com/media-p.slid.es/uploads/840752/images/5151640/carbon.png)
![](https://media3.giphy.com/media/d3mlE7uhX8KFgEmY/giphy.gif)
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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/840752/images/5151643/carbon_14_.png)
WILL CHANGE is a broken promise
FOURTH TRY
Change animation method
NOPE
![](https://media3.giphy.com/media/1BXa2alBjrCXC/giphy.gif)
FIFTH TRY
Let's profile the application in staging
PROFILE before the fix ⚡️
![](https://s3.amazonaws.com/media-p.slid.es/uploads/840752/images/5149892/Captura_de_pantalla_2018-08-02_a_la_s__01.00.03.png)
RUN ANIMATION AFTER LoaD EVENT
💩
![](https://s3.amazonaws.com/media-p.slid.es/uploads/840752/images/5151645/carbon_15_.png)
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.
💃🏽
![](https://s3.amazonaws.com/media-p.slid.es/uploads/840752/images/5151658/carbon_16_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/840752/images/5151657/carbon_17_.png)
LOAD event with promises
PROFILE after the fix ✨
![](https://s3.amazonaws.com/media-p.slid.es/uploads/840752/images/5149894/Captura_de_pantalla_2018-08-02_a_la_s__01.02.16.png)
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
- Profile and base your improvements in metrics
RESOURCES
- Repository with application using this approach
https://github.com/jeremenichelli/react-view-transition-example
- Promise based initialization article
https://jeremenichelli.io/2016/04/patterns-for-a-promise-based-initialization/
- react-router documentation on transitions
https://reacttraining.com/react-router/web/example/animated-transitions
- react-transition-group documentation
https://reactcommunity.org/react-transition-group/
![](https://s3.amazonaws.com/media-p.slid.es/uploads/840752/images/5145235/wfa.gif)
THANKS
https://jeremenichelli.io
github.com/jeremenichelli
twitter.com/jeremenichelli
A sleek view transitions recipe for web apps
By Jeremias Menichelli
A sleek view transitions recipe for web apps
- 1,612