atelier

Catalog / Technique

Scroll settle

Use when a picture or a block should move with the scroll as it crosses the viewport: a frame that opens, a picture that settles or rises, a small parallax. Covers scroll-driven animation on the compositor, the transform-only constructions, why not clip-path, the parallax price, and how it is looked at on the stage.

Loads as
technique-scroll-settle
Written for
An agent, to follow

Scroll settle

Motion scrubbed by scroll, with nothing computed: a view timeline drives transforms on the compositor, and the element’s own style is the end state. Where there is no support, no script, or reduced motion, the page is simply finished.

When to use

  • A picture in a gallery, a listing or a figure that should arrive as the reader scrolls to it, and stop moving when they stop.
  • The fallback and the no-WebGL path for an image arrival.

Do not use it for:

  • The first screen. A frame in view at load is scrubbed from where the page opens.
  • Text. Scaling type is the scroll motion everyone notices.
  • A chart, a table, a figure the reader must compare. A scaled frame misstates it until it settles.
  • A horizontal run driven by vertical scroll. It loses focus visibility, hides how much is left, and a snap strip does the job.

Rules

  1. Transforms and opacity only. clip-path on a view timeline repaints on the main thread every frame in Chrome; two scales that nearly cancel give the same picture and stay on the compositor.
  2. The frame clips. Without overflow: clip the picture’s overscale shows its edge outside the frame.
  3. Keyframes declare only where it starts. The element’s own style is the end, so without support nothing is applied.
  4. Decide reduced motion in script, once. The stage previews it by overriding matchMedia, which a media query cannot see.
  5. Wrap nothing, move nothing. A true edge wipe with a still picture needs a middle box between frame and picture; a recipe that would have to create it by re-parenting the image does not offer that mode. Rise, the picture translating into its frame, is the honest second mode.
  6. Parallax is a price. A share of drift is that share of every picture always cropped away, and parallax is the standard example of non-essential motion. Off by default.
  7. Range ends where the reader looks. A range that ends at cover 45% has the picture still moving a little while it is being looked at; entry 100% is done the moment it is fully in.

Decisions

Question Choose Because
Scroll timelines now? Yes Chrome and Safari have them; Firefox is due in 159
Without them? Scrub the same keyframes by script A finished page with no move was taken for a broken recipe; paused animations set from the frame’s box give the same picture, on the main thread
Settle or edge as the default? Settle Edge needs a middle box
Scrub easing? Linear A curve makes the move front-loaded, which is a taste
Drift? Off The crop, and the motion most likely to bother someone
How is it looked at? The stage’s scrub: a slider that sets the frame’s scroll, with stops at entry, middle and settled Replay only puts the stage back at the top; the scrub holds it at a point of its passage

Tuning

Dial Start Range One end The other
Inset 0.14 0 to 0.3 No move A pop
Overscale 1.18 1 to 1.4 Holds the picture still Settles inward

Overscale is the scale the picture is seen at, frame included. The picture’s own scale is that over the frame’s; set directly, the two cancel and nothing moves. | Range end | cover 45% | entry 100% to cover 60% | Done as it enters | Still moving while looked at | | Drift | 0 | 0 to 0.12 | None | A layer at 0.97 of scroll speed; that share cropped |

Ranges are estimates from stills.

Rest state

The picture as laid out, with nothing added. The same under reduced motion and without script. Without view timelines the move still runs, scrubbed by script.

Cost

  • To build: small. Tuning is medium and all in the two scales and the range.
  • To run: nothing on the main thread; two composited transforms per picture. About 1.3 kB gzipped.
  • To the reader: a picture that is a little small and a little large until it settles. Keep the inset modest where the picture is the reason they came.

Checklist

  • The budget check passes.
  • npm run check:browser: at the entry, middle and settled stops the frame’s and picture’s scales are what the construction says.
  • npm run check:browser: every animation runs on a view timeline, not a clock.
  • npm run check:browser: with view timelines taken away the scales at the same stops are the same, to a hundredth.
  • npm run check:browser: the picture is never hidden; destroy leaves the frames as they were.
  • Looked at once on the stage with the scrub, and once with the Rise mode.
  • Run once in Safari and once in Firefox 159 before it is marked passed.

Recipes

  • mask-settle: the frame opens and the picture settles, or rises.

Sources

  • bcd-animation-timeline: support for scroll-driven animations
  • webkit-scroll-driven-guide: WebKit’s guidance, including on parallax
  • wcag-animation-from-interactions: motion from interaction must be possible to switch off
  • nng-scrolljacking-101: why a horizontal run driven by vertical scroll is a no-go