스크롤 지연 추종Scroll Lag

Scroll Lag

스크롤 지연 추종

다른 이름Also known as · Smooth scroll lag

359

렌더 추가 예정CLIP COMING스크롤 지연 추종Scroll Lag정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 359. 스크롤 지연 추종 · Scroll Lag · expo.out

스크롤 위치가 바뀐 뒤 화면과 일부 레이어가 늦게 따라와 정착한다After the scroll position changes, the screen and some layers trail behind and then settle.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

움직임에 관성과 부드러움이 생긴다. 레이어마다 지연이 다르면 깊이감도 함께 생긴다Adds inertia and softness to motion, and different layer lags add a sense of depth.

언제 쓰나Use whenUSE WHEN

스크롤할 때 배경과 전경이 다른 속도로 따라오게 해 깊이를 줄 때
거친 휠 입력을 부드럽게 다듬을 때

Let background and foreground follow scroll at different rates for depth.
Smooth rough wheel input.

과용 주의AvoidAVOID

추종 지연 1000ms 초과 금지
본문 텍스트 레이어는 지연시키지 않는다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

화면 추종 800ms, 배경 레이어는 300ms 더 지연해 스크롤이 멈춘 뒤에도 0.3초 더 흘러가다 정착한다

과용 · 나쁜 사례OVERUSE

지연이 2초라 화면이 반응하지 않는 것처럼 느껴지거나, 레이어 지연이 커서 텍스트가 읽히지 않고 헤맨다

파라미터Parameters

기본값은 클립에 쓴 값Defaults are the values used in the clip

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
화면 추종	800ms	400~1000ms	저역 통과
레이어 지연	300ms	150~500ms	배경 레이어에 추가
이동 속도	1배	0.8~1.2배	스크롤 대비
이징	expo.out	power3.out~expo.out	정착이 부드럽게

GSAP

let target = 0;
addEventListener('scroll', () => target = scrollY);
gsap.ticker.add(() => {
  gsap.to('.page', { y: -target, duration: 0.8, ease: 'expo.out', overwrite: true });
  gsap.to('.bg', { y: -target * 0.9, duration: 1.1, ease: 'expo.out', overwrite: true });
});

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 스크롤에 지연 추종을 넣어줘. 본문 .page는 800ms expo.out으로 따라오고 배경 .bg는 스크롤량의 0.9배로 1.1초 expo.out으로 300ms 더 늦게 따라오게 해. 텍스트 레이어에는 추가 지연을 주지 마.

Add scroll lag in <target>. The main .page follows scroll with 800ms expo.out, while the .bg follows at 0.9 times the scroll amount with 1.1 seconds of expo.out, about 300ms later. Do not add extra delay to text layers.

Codex

<파일>에 scroll lag를 구현해. .page y: -scrollY duration 0.8 expo.out, .bg y: -scrollY*0.9 duration 1.1 expo.out, overwrite true. scrollY 800으로 점프한 직후 0.2초, 0.8초, 1.4초에 캡처해 .page가 .bg보다 먼저 정착하는지 확인해.

Implement scroll lag in <file>: .page y: -scrollY duration 0.8 expo.out, .bg y: -scrollY*0.9 duration 1.1 expo.out, overwrite true. After jumping scrollY to 800, capture at 0.2s, 0.8s and 1.4s and verify .page settles before .bg.