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:
- 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
- We wrap our animation inside a
prefers-reduced-motionmedia 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: backwardsensures that our content is invisible before the animation begins, if a non-zero
delayis 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: backwardsapplies 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.