Back to Motion Prompt examples
Landing page & web effects · #18
Lazy loading
Images load only when they come into view. As grey placeholders scroll into view, a spinner turns in each, and the images fade in as they arrive. The top row is loaded from the start.
Loading, navigation & ambient loopslazy-loadinglazy-loadimagesplaceholderperformancespinnergallery
Full motion specification
How the movement works
Use it on image-heavy pages to make the first view load faster.
- 01A 3 × 3 grid of 151 × 92 placeholders; the first row is shown from the start. Scroll: 0→110 px at 0.35–1.1 s, 110→225 px at 1.7–2.5 s, 225→0 at 3.5–4.5 s (cubic ease-in-out).
- 02Loading starts when a placeholder's top edge passes above the bottom of the viewport (168 px), with each column 0.12 s later than the one to its left.
- 03For 0.45 s a spinner (radius 11, one turn per 0.8 s) turns in the placeholder's centre.
- 04Then the image fades in 0→1 over 0.35 s (cubic ease-out). Unloaded placeholders show an image icon.
- 05Placeholders that leave the bottom of the view are reset out of sight.
Prompt
Lazy load the gallery images: grey placeholders until loaded, then fade in over 0.3 s.