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

누적 막대와 그룹 막대 전환Stacked-to-grouped Transition

Stacked-to-grouped Transition

누적 막대와 그룹 막대 전환

다른 이름Also known as · Stacked-to-grouped bars

294

도판Fig. 294. 누적 막대와 그룹 막대 전환 · Stacked-to-grouped Transition · power2.inOut

재생 속도Speed

쌓인 막대 조각들이 옆으로 펼쳐진 뒤 공통 기준선으로 내려온다.Stacked segments spread sideways, then move onto a shared baseline.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

합계와 구성 요소의 개별 크기를 연결해 비교한다.Connects total values with comparisons between individual components.

언제 쓰나Use whenUSE WHEN

범주 합계에서 구성 요소별 비교로 전환할 때
누적 막대와 그룹 막대가 같은 자료임을 설명할 때

Switch from category totals to component comparisons.
Explain how stacked and grouped bars encode the same data.

과용 주의AvoidAVOID

전환 중 계열 색과 값 척도를 유지한다.

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

조각을 가로로 0.5초 펼친 뒤 0.1초 쉬고 공통 기준선으로 0.5초 이동한다.

과용 · 나쁜 사례OVERUSE

가로와 세로 좌표를 동시에 크게 바꿔 조각의 대응이 사라진다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
가로 전환	500ms	350~750ms	폭과 x를 먼저 바꾼다.
세로 전환	500ms	350~750ms	y와 높이를 다음에 바꾼다.
단계 간 휴지	100ms	80~200ms	가로 도착을 확인한다.
그룹 간격	24px	16~40px	인접 계열을 구분한다.
이징	power2.inOut	none \| power2.out \| power2.inOut	끝점을 넘지 않는 이징을 쓴다.

GSAP

const tl=gsap.timeline({paused:true});
document.querySelectorAll('.segment').forEach(el=>{
  const d=el.dataset;
  tl.to(el,{attr:{x:+d.groupX,width:+d.groupWidth},duration:0.5,ease:'power2.inOut'},0);
  tl.to(el,{attr:{y:+d.groupY,height:+d.groupHeight},duration:0.5,ease:'power2.inOut'},0.6);
});

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

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 누적 막대와 그룹 막대 전환를 구현해. 쌓인 막대 조각들이 옆으로 펼쳐진 뒤 공통 기준선으로 내려온다. 가로 전환 500ms, 세로 전환 500ms, 단계 간 휴지 100ms, 그룹 간격 24px, 이징 power2.inOut를 적용하고 GSAP 코어의 paused 타임라인 하나로 seek 가능하게 작성해. 전환 중 계열 색과 값 척도를 유지한다.

Implement Stacked-to-grouped Transition for <target> in <file>. Stacked segments spread sideways, then move onto a shared baseline. Use horizontal transition duration: 500ms; vertical transition duration: 500ms; pause between stages: 100ms; group spacing: 24px; easing: power2.inOut in a single paused GSAP core timeline that supports seeking. Keep series colors and value scales unchanged.

Codex

<파일>의 <대상> 장면에 누적 막대와 그룹 막대 전환를 적용해. 가로 전환 500ms, 세로 전환 500ms, 단계 간 휴지 100ms, 그룹 간격 24px, 이징 power2.inOut를 사용하고 다음 동작을 구현해: 각 조각의 x와 폭을 먼저 보간한 뒤 y와 높이를 보간한다. 플러그인과 Math.random 없이 작성하고 0.28초·0.66초·1.1초를 캡처해 초기 상태, 중간 변화, 최종 상태가 연속적이며 다음 예시와 맞는지 확인해: 조각을 가로로 0.5초 펼친 뒤 0.1초 쉬고 공통 기준선으로 0.5초 이동한다.

Apply Stacked-to-grouped Transition to the <target> scene in <file> using horizontal transition duration: 500ms; vertical transition duration: 500ms; pause between stages: 100ms; group spacing: 24px; easing: power2.inOut. Stacked segments spread sideways, then move onto a shared baseline. Use prepared data or geometry with GSAP core, no plugins, and no Math.random; capture at 0.28, 0.66, 1.1 seconds to verify continuous intermediate geometry, correct endpoints, and identical output after repeated seeks. Keep series colors and value scales unchanged.

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP

paused 타임라인 하나에 누적 막대와 그룹 막대 전환 상태를 넣고 seek(t)로 1.1초 구간을 재현한다. 현재 시간에서 도형을 계산해 프레임 누적을 피한다.

ReelForgeBRIEF TO VIDEO

씬 워커 브리프에 가로 전환 500ms, 세로 전환 500ms, 단계 간 휴지 100ms, 그룹 간격 24px, 이징 power2.inOut를 싣고 입력 자료와 초기 도형 좌표를 고정한다. 조각을 가로로 0.5초 펼친 뒤 0.1초 쉬고 공통 기준선으로 0.5초 이동한다.

Scrolline DeckSCROLL SCRUB

진행률 0~1을 1.1초 구간에 매핑해 같은 타임라인을 scrub한다. 시간량은 none, 시각 전환은 power2.out을 쓰고 스프링 대신 끝점을 넘지 않는 ease-out을 쓴다.