고정 장면 스크롤리텔링Pinned Scrollytelling

Pinned Scrollytelling

고정 장면 스크롤리텔링

다른 이름Also known as · Pinned scrollytelling · 고정 장면 스크롤 설명 · Pinned scrollycoding · 고정 코드와 스크롤 설명 · Scrollytelling steps · 스크롤리텔링 단계

389

렌더 추가 예정CLIP COMING고정 장면 스크롤리텔링Pinned Scrollytelling정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 389. 고정 장면 스크롤리텔링 · Pinned Scrollytelling · power2.out

핵심 그림이나 코드 패널은 같은 위치에 머물고 설명이 스크롤되면서 내부 상태와 강조 범위가 바뀐다.A visual stays pinned while scrolling explanations change its internal state and emphasis.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

한 대상을 중심으로 단계별 원리를 설명한다.Explains a sequence of ideas around one stable visual reference.

언제 쓰나Use whenUSE WHEN

코드 한 화면을 네 단계로 나눠 설명할 때
문단을 읽는 동안 핵심 도식을 고정할 때

Explain a code sample through four successive highlights.
Keep a diagram visible while prose describes its stages.

과용 주의AvoidAVOID

고정 패널이 작은 화면의 본문을 가리지 않게 한다.

분류TagsTAGS

원리 도해Explainer 설명Explain 순서·흐름Sequence 설명 영상Explainer video 스크롤덱Scroll deck 웹 UIWeb UI 난이도 중급Intermediategsap

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

그림을 고정하고 네 문단을 0.6초 이동시킨 뒤 각 강조를 1.8초 유지한다.

과용 · 나쁜 사례OVERUSE

문단과 그림이 모두 이동해 설명 대상의 위치를 다시 찾아야 한다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
단계 수	4개	3~6개	단계마다 강조 대상을 하나 정한다.
상태 전환	800ms	400~1000ms	고정 패널 안에서 전환한다.
읽기 유지	1800ms	1500~3000ms	전환 뒤 읽는 시간을 둔다.
문단 이동	600ms	400~800ms	단계당 220px 이동한다.
이징	power2.out	none \| power2.out \| power2.inOut	끝점을 넘지 않는 이징을 쓴다.

GSAP

const tl=gsap.timeline({paused:true});
gsap.set('.visual',{position:'absolute',top:120});
for(let i=0;i<4;i++){
  tl.to('.prose',{y:-220*i,duration:0.6,ease:'power2.out'},i*2.6);
  tl.fromTo('.step-'+i,{opacity:0},{opacity:1,duration:0.8},i*2.6);
  if(i)tl.to('.step-'+(i-1),{opacity:0,duration:0.8},i*2.6);
}
tl.to({}, {duration:1.8});

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 고정 장면 스크롤리텔링를 구현해. 핵심 그림이나 코드 패널은 같은 위치에 머물고 설명이 스크롤되면서 내부 상태와 강조 범위가 바뀐다. 단계 수 4개, 상태 전환 800ms, 읽기 유지 1800ms, 문단 이동 600ms, 이징 power2.out를 적용하고 GSAP 코어의 paused 타임라인 하나로 seek 가능하게 작성해. 고정 패널이 작은 화면의 본문을 가리지 않게 한다.

Implement Pinned Scrollytelling for <target> in <file>. A visual stays pinned while scrolling explanations change its internal state and emphasis. Use step count: 4; state transition duration: 800ms; reading hold: 1800ms; paragraph movement duration: 600ms; easing: power2.out in a single paused GSAP core timeline that supports seeking. Keep the pinned panel from covering prose on small screens.

Codex

<파일>의 <대상> 장면에 고정 장면 스크롤리텔링를 적용해. 단계 수 4개, 상태 전환 800ms, 읽기 유지 1800ms, 문단 이동 600ms, 이징 power2.out를 사용하고 다음 동작을 구현해: 고정 HTML 패널과 이동 설명 레이어를 두고 GSAP 코어 타임라인에서 문단 위치와 패널 상태를 함께 갱신한다. 플러그인과 Math.random 없이 작성하고 2.6초·6.24초·10.4초를 캡처해 초기 상태, 중간 변화, 최종 상태가 연속적이며 다음 예시와 맞는지 확인해: 그림을 고정하고 네 문단을 0.6초 이동시킨 뒤 각 강조를 1.8초 유지한다.

Apply Pinned Scrollytelling to the <target> scene in <file> using step count: 4; state transition duration: 800ms; reading hold: 1800ms; paragraph movement duration: 600ms; easing: power2.out. A visual stays pinned while scrolling explanations change its internal state and emphasis. Use prepared data or geometry with GSAP core, no plugins, and no Math.random; capture at 2.6, 6.24, 10.4 seconds to verify continuous intermediate geometry, correct endpoints, and identical output after repeated seeks. Keep the pinned panel from covering prose on small screens.