화면 스크롤UI Scroll

UI Scroll

화면 스크롤

다른 이름Also known as · 문서 스크롤 · Tilted page scroll · 기울어진 페이지 스크롤 · Tilted Page Scroll · Ui Scroll · UI 콘텐츠 스크롤 · 3d-page-scroll · Horizontal scroll gallery

318

도판Fig. 318. 화면 스크롤 · UI Scroll · power3.inOut

재생 속도Speed

긴 문서 내용을 부드럽게 위로 옮겨 목표 문단에 멈추고 세로선으로 표시하는 동작An animation that smoothly moves a long document upward, stops at a target paragraph, and marks it with a vertical line.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

문서 안의 이동 방향과 도착한 읽기 위치Shows the direction of travel within a document and the reading position reached.

언제 쓰나Use whenUSE WHEN

문서를 555px 스크롤한 뒤 다음 말 하나를 고른다 문단 왼쪽에 주홍 선을 세운다
문서 안의 이동 방향과 도착한 읽기 위치을 보여 줄 때

When scrolling a document by 555px and placing a vermilion line to the left of the "Pick one next word" paragraph
When showing document navigation direction and the reading position reached

과용 주의AvoidAVOID

목표 문단이 잘린 채 멈추거나 스크롤 도중 강조선이 엉뚱한 문단에 붙는다
동작 종료 뒤 최소 0.5초 읽기 시간을 둔다

분류TagsTAGS

UI 시연UI Demo 설명Explain 강조Emphasis 제품 시연Product demo 설명 영상Explainer video 웹 UIWeb UI 난이도 기본Basicgsap

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

문서를 555px 스크롤한 뒤 다음 말 하나를 고른다 문단 왼쪽에 주홍 선을 세운다

과용 · 나쁜 사례OVERUSE

목표 문단이 잘린 채 멈추거나 스크롤 도중 강조선이 엉뚱한 문단에 붙는다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
문서 이동	555px	300~800px	목표 문단 상단이 창 안쪽 30px에 정렬
스크롤 지속	1.55s	1.0~1.9s	출발과 정지가 읽히도록
표시 지연	정지 후 0.05s	0~0.2s	도착 뒤 주홍 선 노출
세로선	4×125px / 0.30s	3~6px / 0.2~0.4s	scaleY로 선을 세운다

GSAP

const tl = Motion.timeline();
tl.to('.doc',{y:-555,duration:1.55,ease:'power3.inOut'},.3);
tl.to('.thumb',{y:250,duration:1.55,ease:'power3.inOut'},.3);
tl.fromTo('.mark',{scaleY:0,opacity:0},{scaleY:1,opacity:1,duration:.3,ease:'power2.out'},1.9);
tl.to('.lead',{opacity:1,duration:.2},2.2);

라이브 소스 열기Open live source 소스 코드Source README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 문서 창은 820×390px로 두고 내부 문서를 0.3초부터 1.55초 동안 y -555px로 power3.inOut 스크롤해줘. 목표 문단이 창 안쪽 30px에 정렬되면 1.9초부터 주홍 4×125px 세로선을 0.3초 동안 scaleY 0에서 1로 표시해. 2.4~3초는 완성 상태로 유지해.

Set the <target> document viewport to 820×390px and scroll the inner document to y -555px over 1.55 seconds starting at 0.3 seconds with power3.inOut. Once the target paragraph is aligned 30px inside the viewport, reveal a vermilion 4×125px vertical line by changing scaleY from 0 to 1 over 0.3 seconds starting at 1.9 seconds. Hold the completed state from 2.4 to 3 seconds.

Codex

<파일>의 문서 시연에 overflow hidden 창과 내부 문서 transform 스크롤을 적용해. 0.3~1.85초에 y -555px, power3.inOut으로 옮기고 스크롤바 thumb은 y 250px로 같이 이동해. 0.23초, 1.23초, 2.9초 캡처로 이동, 목표 문단 전체 노출, 왼쪽 주홍 세로선과 완성 홀드를 확인해.

Apply an overflow hidden viewport and transform-based scrolling of the inner document to the document demonstration in <file>. Move to y -555px from 0.3 to 1.85 seconds with power3.inOut, and move the scrollbar thumb to y 250px in sync. Capture at 0.23, 1.23, and 2.9 seconds to check the motion, full visibility of the target paragraph, the vermilion vertical line on the left, and the final hold.