Screen transitions with ease
•
0 likes•1,368 views
Show relevant screen transitions on a mobile web application is a difficult problem. At Doctolib, we faced this problem. We haven't found any satisfactory solution in the open source world. We had to improvise and respond with an original solution.
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to Screen transitions with ease
Similar to Screen transitions with ease (20)
Recently uploaded
Recently uploaded (20)
Screen transitions with ease
- 1. Screen transitions with ease Olivier Tassinari, Doctolib, @oliviertassinari React Paris Meetup
- 2. Why using transitions ? • Provide a better UX • Makes the users wait • Create a visual mapping of the state of the app • The native apps have well understood this, what about the web?
- 3. In practice
- 5. How was it done?
- 6. 1. Apply a transition?
- 7. • Takes two variables: • A transition • A screen The key is really important, it’s allow TransitionGroup to distinguish the children The API
- 9. • An imperative API • Rely on the CSS properties and class names react-addons-css-transition-group
- 10. • A declarative API react-motion
- 11. Which one to use? css-transition-group :) react-motion :( with a x5 CPU throttling to simulate low-end devices
- 12. 2. Organize the screens?
- 13. • A declarative API • Manage the screens • Each screen has his own URL react-router
- 14. • React-router provides a simple transition example • Works well A simple fade
- 15. With an other transition? • A more complex one
- 16. No :( • We also need to manage the transitions based on the screen we display
- 17. Using a custom state? • No • We need to be highly bound to the history API • We need to handle the Android back button
- 18. Apply the transition on the routes? :( • Is declarative • But, we need to distinguish the show and dismiss transition • But, we often need some custom transition on some button We can’t have show-from- right and reveal-from-right at the same time
- 19. With a full mapping :( • The number of combinations can potentially be n^2 • Hard to maintain over time
- 20. Our solution Home Actions Views Transitions
- 21. Our solution Home Login Actions Views Transitions dismiss: reveal-from-right 1. show: show-from-right 1.show
- 22. Our solution Home Login Forgot Password Actions Views Transitions dismiss: reveal-from-right 1. show: show-from-right dismiss: reveal-from-right 2. show: show-from-right 2.show
- 23. Our solution Home Login Actions Views Transitions dismiss: reveal-from-right 1. show: show-from-right 3. dismiss: reveal-from-right 2. show: show-from-right 3.dismiss
- 24. Our solution Home Actions Views Transitions 4. dismiss: reveal-from-right 1. show: show-from-right 3. dismiss: reveal-from-right 2. show: show-from-right 4.dismiss
- 25. Not landing on the home page? Login Actions Views Transitions dismiss: reveal-from-right show: show-from-right
- 26. Not landing on the home page? Home Login Actions Views Transitions 1. dismiss: reveal-from-right show: show-from-right 1.dismiss
- 27. Works greats :) • An example with a user landing on a nested screen
- 28. • Advanced features: • Support nesting • Upcoming improvements • Open sourcing of the TransitionGroup • Wait for the screen to be mounted before triggering the transition • Disabling the transitions on low-end devices that are just too slow doctolib/react-router-transitions Open source