React UX: Mastering the Fade In
Improving React User Experience
Our applications are always moving from screen to screen, constantly throwing data at the user. Today we will look at how we can handle these transitions in the most elegant and beautiful manor.
Let’s take a look at the before and after example above. In the before example, the welcome screen immediately pops up, no animation, no transition, just sitting there. Ugly. Then we click on our inbox and get a rigid transition straight to some messages. I don’t really enjoy using this person’s application, it just feels basic.
On the other hand, when looking at the after example, try to pay attention to this first milliseconds of the GIF. The present pops open with an exciting short animation, then the welcome text and button fade in from the bottom of the screen. Smooth. Once I click the inbox, the messages elegantly fade in to view, sliding into their places one by one. Nice.
This is incredibly easy to implement
Thanks to a useful library, react-fade-in, you don’t have to deal with any CSS. You simply wrap ANY component with a <FadeIn> tag, and it will automatically animate each child, one by one. You can also just wrap the parent with <FadeIn> and it will animate everything as one block.
The <FadeIn> component can take two props:
delay: Default: 50. Delay between each child's animation in milliseconds.
transitionDuration: Default: 400. Duration of each child's animation in milliseconds.
delay should be decreased when working with long lists
transitionDuration can be increased for a nice slow fade
This small, simple addition will help upgrade your application’s user experience.
This tactic can be used to fade in text, images, lists, and any other React component you can think of. You can even wrap your entire app in a <FadeIn>!
Implementing Fade In, step by step
npx create-react-app fade
cd fade
npm i react-fade-in
Edit App.js:
For more React UX:
