그리드 플립Grid Flip

Grid Flip

그리드 플립

다른 이름Also known as · Grid flip · 격자 플립 · PuzzleRight · Tile wave flip · 타일 파도 플립 · Card Wipe · 카드 와이프

166

도판Fig. 166. 그리드 플립 · Grid Flip · power2.inOut

재생 속도Speed

장면을 나눈 사각 타일이 순차로 뒤집혀 뒷면의 다음 장면을 보여주는 전환Rectangular tiles cut from the scene flip in sequence to reveal the next scene on their backs.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

부분의 변화가 전체의 변화로 쌓여 가는 흐름. 카드가 차례로 뒤집힌다A flow where partial changes accumulate into a full one: cards flip one after another.

언제 쓰나Use whenUSE WHEN

대시보드나 카드 UI에서 전체 상태가 바뀔 때
타일 순서로 파도치듯 장면을 교체하고 싶을 때

Change the whole state of a dashboard or card UI.
Swap scenes in a wave-like tile order.

과용 주의AvoidAVOID

타일 수 60개 초과 금지(DOM 부담)
perspective는 부모에 한 번만 건다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

8x5 격자 타일이 좌상에서 우하로 30ms 간격으로 180도 회전하며 1.0초 안에 모두 뒤 장면을 보여준다

과용 · 나쁜 사례OVERUSE

타일마다 perspective가 각자 걸려 뒤틀려 보이거나, 격자가 20x20처럼 촘촘해 렌더가 느리다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
전체 지속	1.0s	0.7~1.4s	마지막 타일 종료 기준
격자	8x5	6x4~10x6	타일 40개
타일 지연	30ms	15~50ms	좌상에서 우하
perspective	900px	700~1200px	부모에 한 번

GSAP

gsap.set('.stage', { perspective: 900 });
tl.to('.tile', { rotationY: 180, duration: 0.6, ease: 'power2.inOut',
  stagger: { each: 0.03, grid: [5, 8], from: 'start' } });

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

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상A>에서 <대상B>로 그리드 플립 전환을 만들어줘. 화면을 8x5 타일로 나눠 각 타일이 rotationY 0에서 180도로 0.6초 동안 power2.inOut으로 뒤집히고, 뒷면에는 B가 보이게 해. stagger는 30ms, 좌상에서 우하 순서, 부모에 perspective 900px을 한 번만 걸고 backface-visibility hidden. paused 타임라인 하나.

Build a grid flip from <targetA> to <targetB>. Split the frame into 8x5 tiles, each rotating rotationY 0 to 180 over 0.6 seconds with power2.inOut and showing B on the back. Stagger 30ms from top left to bottom right, apply perspective 900px once on the parent, and set backface-visibility hidden. One paused timeline.

Codex

<파일>에 grid flip을 적용해. .tile 40개에 rotationY 0에서 180 (0.6s, power2.inOut), stagger { each: 0.03, grid: [5, 8], from: 'start' }, .stage perspective 900px. 0.3초 캡처에서 좌상 타일부터 뒤집힌 대각선 파도가 보이는지, 1.0초에 전체가 B인지 확인해.

Apply a grid flip in <file>. Animate 40 .tile elements rotationY 0 to 180 (0.6s, power2.inOut) with stagger { each: 0.03, grid: [5, 8], from: 'start' } and perspective 900px on .stage. Capture at 0.3 seconds to confirm a diagonal wave of flipped tiles from the top left, and at 1.0 seconds to confirm the whole frame shows B.