스크롤 스크럽Scroll Scrubbing

Scroll Scrubbing

스크롤 스크럽

다른 이름Also known as · Scroll progress scrub · 스크롤 진행 스크럽 · Scrub progress · 스크럽 진행도

360

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

도판Fig. 360. 스크롤 스크럽 · Scroll Scrubbing · none

스크롤 위치를 앞뒤로 움직이면 장면도 같은 비율로 진행하거나 되감긴다Moving the scroll position forward or backward advances or rewinds the scene at the same ratio.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

스크롤과 설명 진행이 직접 연결되어 보는 사람이 속도를 쥔다. 되감기가 자유롭다Scroll and explanation progress are tied directly, so the viewer holds the pace and can rewind freely.

언제 쓰나Use whenUSE WHEN

단계별 설명을 스크롤 길이에 묶어 원하는 속도로 읽게 할 때
제품 회전이나 도해를 스크롤로 되감아 보게 할 때

Bind step-by-step explanation to scroll length so people read at their own speed.
Let viewers scrub a product rotation or diagram back and forth.

과용 주의AvoidAVOID

scrub 중에는 스프링 이징 금지(ease-out 또는 linear)
자동 재생과 scrub을 한 요소에 섞지 않는다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

스크롤 1200px 구간이 타임라인 progress 0~1에 대응하고 화면은 500ms 지연으로 부드럽게 따라온다

과용 · 나쁜 사례OVERUSE

progress와 스크롤을 연결하지 않고 스크롤이 시작되면 자동 재생돼 되감기가 안 된다. 스크롤 구간이 300px라 너무 민감하다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
스크롤 구간	1200px	800~2400px	progress 0~1
추종 지연	500ms	200~800ms	scrub smoothing
진행 범위	0~1		0에서 1까지 선형
이징	none		타임라인 안쪽에서 ease-out 허용

GSAP

// ScrollTrigger 없이 코어만: 스크롤 값을 progress로 변환
let target = 0, cur = 0;
addEventListener('scroll', () => target = Math.min(1, scrollY / 1200));
gsap.ticker.add(() => { cur += (target - cur) * 0.12; tl.progress(cur); });

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 타임라인을 스크롤로 스크럽하게 해줘. 스크롤 0~1200px를 progress 0~1에 대응시키고 GSAP ticker에서 cur += (target - cur) * 0.12로 부드럽게 따라가게 해. 타임라인은 paused이고 자동 재생은 없어야 해.

Make the timeline in <target> scrub with scroll. Map scroll 0 to 1200px to progress 0 to 1, and follow smoothly in the GSAP ticker with cur += (target - cur) * 0.12. The timeline is paused with no autoplay.

Codex

<파일>에 scroll scrub를 구현해. 스크롤 구간 1200px, 지연 계수 0.12, tl.progress(cur)만 호출한다. scrollY 0, 300, 600, 1200 시점에 캡처해 progress가 0, 0.25, 0.5, 1이고 되감을 때 같은 프레임이 나오는지 확인해.

Implement scroll scrub in <file>: 1200px scroll range, smoothing 0.12, only tl.progress(cur) is called. Capture at scrollY 0, 300, 600 and 1200 and verify progress is 0, 0.25, 0.5 and 1, and that rewinding yields identical frames.