I have a section that pins while a scroll-linked transform runs through it. Tuned on a 1200px viewport, it lands exactly where I want.

On anything wider it stops somewhere else. The wider the screen, the further off it lands. Past a certain width the element ends up almost outside the frame.

My guess at the cause: the two sides of the mapping don't share a unit. The scroll distance comes from the pinned section and scales with the viewport, while the travel distance is a fixed value that doesn't. Same progress, different place at every width.

What I'd like to hear: how do you set travel distance on a pinned scroll transform so the end position holds at any width?

Do you derive it from the element's own size, from the viewport, or do you set values per breakpoint and accept the maintenance?

I have a section that pins while a scroll-linked transform runs through it. Tuned on a 1200px viewport, it lands exactly where I want.

On anything wider it stops somewhere else. The wider the screen, the further off it lands. Past a certain width the element ends up almost outside the frame.

My guess at the cause: the two sides of the mapping don't share a unit. The scroll distance comes from the pinned section and scales with the viewport, while the travel distance is a fixed value that doesn't. Same progress, different place at every width.

What I'd like to hear: how do you set travel distance on a pinned scroll transform so the end position holds at any width?

Do you derive it from the element's own size, from the viewport, or do you set values per breakpoint and accept the maintenance?