AWESOME AI MOTION
효과Effects / UI 시연UI Demo / Nº 320

아코디언 펼치기Accordion Expansion

Accordion Expansion
아코디언 펼치기
다른 이름Also known as · Anchored panel expand · 고정 모서리 패널 확장 · Anchored Expand · 고정 변 확장 · anchored-layout-expand · Accordion expansion · 아코디언 펼침 · Accordion Disclosure · Expandable Toolbar · 도구 모음 펼치기 · Code fold expansion · 코드 접기와 펼치기
320
도판Fig. 320. 아코디언 펼치기 · Accordion Expansion · power3.out
재생 속도Speed

접힌 영역이 고정된 가장자리에서 펼쳐지고 주변 항목이 새 공간만큼 밀려난다.A panel expands from a fixed edge while adjacent content moves aside.

01

무엇을 전하나What it tells

전달 효과ConveysCONVEYS
내용의 추가와 공간적 종속 관계를 보여준다.Explains added content and its spatial relationship to the surrounding layout.
언제 쓰나Use whenUSE WHEN
  • 상세 설정을 단계적으로 공개할 때
  • 코드 접기를 풀어 내부를 설명할 때
  • Reveal detailed settings progressively.
  • Unfold code to explain its contents.
과용 주의AvoidAVOID
  • 측정 전에 숨긴 내용 높이를 0으로 취급하지 않는다
분류TagsTAGS
UI 시연UI Demo설명Explain설명 영상Explainer video제품 시연Product demo웹 UIWeb UI난이도 기본Basicgsap
02

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

상단을 고정한 패널이 높이 240px로 펴지고 아래 항목이 함께 밀린다

과용 · 나쁜 사례OVERUSE

높이만 늘어나고 아래 항목이 겹친 채 남는다

03

파라미터Parameters

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

항목PARAM기본DEFAULT범위RANGE메모NOTE
펼침450ms300~650ms레이아웃 변경 시간
목표 높이240px120~480px실제 scrollHeight로 교체
내용 지연80ms40~120ms공간 확보 후 공개
이징power3.outpower2.out~power3.out감속 정착
GSAP
const panel = document.querySelector('.panel');
const height = panel.scrollHeight;
gsap.set(panel,{height:0,overflow:'hidden'});
tl.to(panel,{height,duration:0.45,ease:'power3.out'},0);
tl.fromTo('.panel-content',{opacity:0},{opacity:1,duration:0.25},0.08);
라이브 소스 열기Open live source소스 코드SourceREADME
04

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 아코디언 펼치기을 적용한다. 상단 앵커를 고정하고 측정 높이 240px까지 450ms 펼치며 내용은 80ms 늦게 공개한다. 초기 상태를 명시한 paused 타임라인으로 만들고 고정 좌표와 시간만 사용해 seek를 재현한다.

Apply Accordion Expansion to <target> in <file>. Anchor the top edge, expand to the measured 240px height in 450ms, and reveal the content after an 80ms delay. Define the initial state and use a paused timeline with fixed coordinates and timings for repeatable seeking.

Codex

<파일>에서 <대상>의 아코디언 펼치기 장면에 적용한다. 상단 앵커를 고정하고 측정 높이 240px까지 450ms 펼치며 내용은 80ms 늦게 공개한다. 0.11초·0.29초·0.65초 시점을 캡처해 시작 상태, 중간 관계, 최종 정착과 겹침 여부를 확인한다.

Implement Accordion Expansion in the scene for <target> in <file>. Anchor the top edge, expand to the measured 240px height in 450ms, and reveal the content after an 80ms delay. Capture at 0.11s, 0.29s, 0.65s to verify the initial state, intermediate relationships, final settling, and unwanted overlap.

05

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP
paused 타임라인에 아코디언 펼치기의 초기 상태와 종료 상태를 함께 기록하고 0.45초까지 seek로 재현한다.
ReelForgeBRIEF TO VIDEO
씬 워커 브리프에 아코디언 펼치기 대상 선택자와 펼침 450ms, 목표 높이 240px, 내용 지연 80ms를 싣고 최종 상태 유지 시간을 지정한다.
Scrolline DeckSCROLL SCRUB
진행률 0~1을 0.45초 구간에 매핑하고 scrub에서는 스프링 대신 power3.out으로 위치를 계산한다.
06

잘 맞는 조합Pairs well with

점진적 공개 · Progressive Disclosure
Nº 365점진적 공개Progressive DisclosureProgressive Disclosure
레이아웃 재배치 · Layout Reflow
Nº 343레이아웃 재배치Layout ReflowLayout Reflow
07

출처Sources

개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo