loading code fetching the highlighted snippet
FIG-001/ COLOR
rgb vs hsl.
The browsers Web Animations API and motions animate() interpolate colours differently. Watch them side by side: the left swatch sweeps through hue (HSL), the right takes a straight line in RGB space.
- Same start (
#ff0088) and end (#0d63f8) colour for both swatches — only the interpolation path differs. - The left swatch (WAAPI) sweeps through HSL space, so the midpoint takes a detour through orange / green / cyan before reaching blue. The right swatch (motion) walks straight through RGB space — magenta dims, blue brightens, no hue detour.
- Pure motion call:
animate(element, {backgroundColor: […]}, …)binds an imperative animation lifecycle to the element. The returned controls let youcancel()on cleanup so the animation doesn't outlive the component.
Browser (HSL)
Motion (RGB)
category · color
sheet · sheet 01 / 01
⟳ to re-run