Illustrations and photographs may load and transition in three phases by staggering opacity, exposure, and saturation levels.
Progressive fade-in
Duration
Animation
Use longer durations for loading images, and shorter durations for transitions.
Illustrations and photographs may load and transition in three phases at staggered durations, rather than relying on opacity changes alone. You may combine image opacity, exposure, and saturation changes to suit your needs.
Images should begin loading with low contrast levels and desaturated color. Once image opacity reaches 100%, display the image with full-color saturation.
Opacity, exposure, and saturation recommendations for loading images
Opacity: 0% start, 100% end
Exposure: Gamma, Black output (for darker images)
Saturation: 0 or 20% start, 100% end
Full opacity and exposure
Color saturation
This process is ideal for larger screens, such as loading the Chrome OS wallpaper.
Animation showing loading on larger screens for Chrome OS wallpaper
Visualize the image fading in, like a print during the photo development process.
Don’t adjust the levels in a way that will overexpose the lighter values.
Do.
Don’t.
A longer duration is recommended for loading images, and a shorter duration is recommended for transitions.
Load and transition animation
Add a small position shift to loading images. The background image shown here in the account switcher animates in horizontally.
Video showing adding animation