Screen transitions with easeOlivier Tassinari, Doctolib, @oliviertassinari

React Paris Meetup

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?

In practice

@oliviertassinari

@neozirostreamlining access to healthcare

How was it done?

1. Apply a transition?

• Takes two variables:

• A transition

• A screen The key is really important, it’s allow TransitionGroup to distinguish the children

The API

An implementation example

• An imperative API

• Rely on the CSS properties and class names

react-addons-css-transition-group

• A declarative API

react-motion

Which one to use?

css-transition-group :)

react-motion :(

with a x5 CPU throttling to simulate low-end devices

2. Organize the screens?

• A declarative API

• Manage the screens

• Each screen has his own URL

react-router

• React-router provides a simple transition example

• Works well

A simple fade

With an other transition?

• A more complex one

No :(

• We also need to manage the transitions based on the screen we display

Using a custom state?

• No

• We need to be highly bound to the history API

• We need to handle the Android back button

Apply the transition on the routes? :(

• Is declarative

• But, we need to distinguish the show and dismiss transition

• But, we often needsome customtransition on some button

We can’t have show-from-right and reveal-from-right at the same time

With a full mapping :(

• The number of combinations can potentially be n^2

• Hard to maintain over time

Our solution

Home

Actions Views Transitions

Our solution

Home

Login

Actions Views Transitions

dismiss: reveal-from-right 1. show: show-from-right

1.show

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

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

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

Not landing on the home page?

Login

Actions Views Transitions

dismiss: reveal-from-right show: show-from-right

Not landing on the home page?

Home

Login

Actions Views Transitions

1. dismiss: reveal-from-right show: show-from-right

1.dismiss

Works greats :)

• An example with a user landing on a nested screen

• 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