FadeIn

jsx

Often, we aren't able to render all the content on a page in the initial paint:

• We might be fetching that data from an API
• As seen in The Perils of Rehydration, we can't render user-specific content when server-side rendering with something like Gatsby.
• We might toggle between different UI elements depending on user state (eg. different calendar views)

It can be jarring for users when things snap into existence; if that happened in real life, it would be terrifying! Our brains are used to things transitioning.

<FadeIn> is a utility component to quickly add a fade-in animation for an element (or group of elements).

Click the button to re-load my 3D avatar:

jsx

• In this example we're using styled-components, though the same approach will work regardless of your styling preferences. With vanilla CSS, you'd use a @keyframes animation.
• We wrap our animation inside a prefers-reduced-motion media query. This is to be mindful of folks with vestibular disorders. Much more context available in the Accessible Animations with React tutorial.
• animation-fill-mode: backwards ensures that our content is invisible before the animation begins, if a non-zero delay is passed. If we had a 500ms delay, for example, our content would be totally visible for that first half-second before fading in. animation-fill-mode: backwards applies the initial condition (opacity: 0) backwards in time ⏳
• We delegate all unrecognized props. This is done to make our life a little bit easier if, say, we want to pass an ID to the wrapper for testing, or wrap this element in a styled-component.