효과Effects / 데이터Data / Nº 287

순위 재배치Rank Transition

Rank Transition

순위 재배치

다른 이름Also known as · Rank sorting transition · 순위 정렬 전환 · Animated sorting · Rank transition

287

렌더 추가 예정CLIP COMING순위 재배치Rank Transition정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 287. 순위 재배치 · Rank Transition · power2.inOut

길이와 색을 유지한 항목들이 서로 자리를 바꾸어 새 정렬 순서로 놓인다.Items move to new ranked positions while retaining their identity and encoding.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

누가 올라가고 내려갔는지 추적한다.Lets viewers track which items rise or fall in rank.

언제 쓰나Use whenUSE WHEN

지표 갱신 전후의 제품 순위를 비교할 때
항목 정체성을 유지하며 순위표 정렬 기준을 바꿀 때

Compare ranked products before and after a metric update.
Change a leaderboard sorting criterion while preserving item identities.

과용 주의AvoidAVOID

정렬 중 라벨과 마크를 따로 이동하지 않는다.

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

ID별 색과 라벨을 유지하고 행 전체를 0.75초에 새 순위로 옮긴다.

과용 · 나쁜 사례OVERUSE

순위마다 새 색을 부여해 같은 항목을 추적할 수 없게 한다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
재배치 시간	750ms	500~1100ms	항목 ID로 목표 행을 찾는다.
행 지연	25ms	0~50ms	움직임 시작만 조금 늦춘다.
행 간격	28px	28~64px	라벨 높이를 고려한다.
이징	power2.inOut	none \| power2.out \| power2.inOut	끝점을 넘지 않는 이징을 쓴다.

GSAP

const tl=gsap.timeline({paused:true});
const order=['c','a','d','b'];
document.querySelectorAll('.rank-row').forEach((row,i)=>{
  const rank=order.indexOf(row.dataset.id);
  if(rank>=0)tl.to(row,{y:rank*28,duration:0.75,ease:'power2.inOut'},i*0.025);
});

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 순위 재배치를 구현해. 길이와 색을 유지한 항목들이 서로 자리를 바꾸어 새 정렬 순서로 놓인다. 재배치 시간 750ms, 행 지연 25ms, 행 간격 28px, 이징 power2.inOut를 적용하고 GSAP 코어의 paused 타임라인 하나로 seek 가능하게 작성해. 정렬 중 라벨과 마크를 따로 이동하지 않는다.

Implement Rank Transition for <target> in <file>. Items move to new ranked positions while retaining their identity and encoding. Use reorder duration: 750ms; row stagger: 25ms; row spacing: 28px; easing: power2.inOut in a single paused GSAP core timeline that supports seeking. Move labels and marks together while preserving item IDs and colors.

Codex

<파일>의 <대상> 장면에 순위 재배치를 적용해. 재배치 시간 750ms, 행 지연 25ms, 행 간격 28px, 이징 power2.inOut를 사용하고 다음 동작을 구현해: ID별 목표 행 좌표를 구하고 마크와 라벨을 함께 이동한다. 플러그인과 Math.random 없이 작성하고 0.23초·0.54초·0.9초를 캡처해 초기 상태, 중간 변화, 최종 상태가 연속적이며 다음 예시와 맞는지 확인해: ID별 색과 라벨을 유지하고 행 전체를 0.75초에 새 순위로 옮긴다.

Apply Rank Transition to the <target> scene in <file> using reorder duration: 750ms; row stagger: 25ms; row spacing: 28px; easing: power2.inOut. Items move to new ranked positions while retaining their identity and encoding. Use prepared data or geometry with GSAP core, no plugins, and no Math.random; capture at 0.23, 0.54, 0.9 seconds to verify continuous intermediate geometry, correct endpoints, and identical output after repeated seeks. Move labels and marks together while preserving item IDs and colors.