A screen that kept moving

The previous showcase tilted the screen by up to 24° as you scrolled. But that scroll-driven transform also carried a 0.64-second springy transition and JavaScript smoothing. After the scroll stopped, the screen kept moving for about 2,013 ms, and 557 px of the 773 px pinned range changed nothing at all.

When a product screen lags behind your hand, the whole site feels slow. So instead of tuning the effect, we changed the structure.

A pinned stage in three steps

The new showcase pins the screen in place and switches scenes with three step tabs beside it. Each step gets 24% of the window height, so on a 900 px tall screen all three steps fit in exactly 648 px. Scroll position only decides which step is active; motion happens once, when the step changes.

Scrolling picks the step.
Motion shows the result.

Short motion, information on the frame

When the step changes, the images crossfade over 450 ms and the camera settles over 900 ms. Because scrolling no longer drags the screen directly, nothing trails behind once you stop. Each scene carries short callouts that point at the feature in view, and on small screens the same three scenes become a swipeable snap strip.


See the new showcase on the moble.co.kr front page. Development notes will keep recording the numbers and decisions behind changes like this.