The view-timeline-inset property controls an inset rectangle that alters the area used as the "viewport" for view-based timelines. Rather than relying strictly on the element’s outer used box as the region that determines timeline progress and intersection-like checks, this property lets authors shrink or expand that region relative to the element. The resulting adjusted rectangle is what the browser uses when calculating how far through a view timeline an element is (and therefore how animations attached to that timeline progress), so changing the inset effectively changes when and how strongly view-driven animations run.

Because it changes the geometry that drives timeline progress, view-timeline-inset is a precision tool for timing and choreography. You can use it to cause an animation to begin earlier or later relative to the element’s visual appearance in the viewport, to delay a visibility-triggered effect until more of the element is inside the area of interest, or to create "buffer" regions that require deeper intersection before progress advances. It is commonly used together with a view timeline declaration such as view-timeline to refine exactly how that timeline interprets the element’s position and coverage.

In layout and interaction scenarios, the inset moves with the element - the adjusted rectangle is applied in the same coordinate context used by the timeline, so transforms, scrolling, and layout changes that affect the element will also affect the timeline region. When combined with timeline-driven animations (for example those tied through animation-timeline), the inset can subtly change easing and sequence because it affects the mapping from element position to timeline progress. Because it affects when animations become active, consider accessibility and performance: tuning the inset can reduce unnecessary off-screen animation work, but it can also make effects harder to discover if the trigger region becomes too small or too disconnected from the visible target.