Interpolation calculates an intermediate value between two known endpoints. In responsive CSS, it turns minimum and maximum values into a fluid preferred value; in animation, it maps progress between 0 and 1 to a changing property value. section 6.5.4 section 12.1.3
Apply the same calculation pattern to several frontend problems:
- For a CSS clamp() value, calculate `(maxValue - minValue) / (maxVW - minVW) * 100`, then use the result as a vw scaling value. section 6.5.4
- For responsive spacing, interpolate between minimum and maximum padding or gap values to create fluid gutters across viewport sizes. section 6.5.5
- For animation, use `start + (end - start) * progress`; transform progress first with an easing function when motion should feel less uniform. section 12.1.3
Fluid margin with clamp()
A margin that should range from 1rem at 400px to 3rem at 1200px produces a 4vw preferred value: `margin: clamp(1rem, 4vw, 3rem);`. The browser keeps the result within the specified endpoints. section 6.5.4
Animating a title
A JavaScript animation computes elapsed progress, optionally eases it, interpolates between an offscreen start position and the target position, and updates the title on each animation frame. section 12.1.3
preferredValue = (maxValue - minValue) / (maxVW - minVW) * 100
Use the formula listing to verify the viewport-based calculation before placing the result in a clamp() declaration. section 6.5.4
function lerp(start, end, progress) {
return start + (end - start) * progress;
}
Use the lerp implementation to connect animation progress with numeric properties such as position, opacity, or color. section 12.1.3
