CSS progress() With no-clamp Is the Neat Way to Overshoot an Animation

The CSS progress() function turns a value into a number between 0 and 1, based on where it sits between a start and an end. By default the result is clamped, so it never goes below 0 or above 1. According to web.dev's September 2026 roundup, Firefox 155 and Safari 27 now support a no-clamp keyword that lets the number run past both ends.

That sounds minor, and it is exactly what a lot of motion needs. Clamping is right for a progress bar. It is wrong for anything that should overshoot, such as a parallax layer that keeps drifting after a section ends, a scale effect that leans slightly past its target, or a spring-like settle that goes beyond 1 before returning.

Used with calc(), the value can drive opacity, transforms and spacing directly in CSS, with no JavaScript measuring the viewport on every scroll event. That is better for performance and easier to maintain.

A word of caution. Unclamped values are easy to abuse, and an opacity or scale that runs far past its range will look broken. Clamp deliberately with min() and max() where you want a limit, and keep the overshoot small. The browser support is still partial, so provide a clamped fallback and treat the overshoot as a finishing touch.