스프링 오버슛Spring & Overshoot

Spring & Overshoot

스프링 오버슛

다른 이름Also known as · 오버슈트 · Back easing · 목표 초과 · Elastic spring slide · 스프링 슬라이드 전환 · Spring Text Pop · 스프링 텍스트 팝 · Impact Number Reveal

004

도판Fig. 004. 스프링 오버슛 · Spring & Overshoot · back.out(1.5)

재생 속도Speed

목표 크기를 조금 넘었다가 되돌아와 안착하는 움직임An object briefly exceeds its target scale before returning and settling.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

관성과 복원력이 있는 도착을 보여준다Shows inertia and restoring force as the object settles.

언제 쓰나Use whenUSE WHEN

작은 객체가 나타나거나 선택 상태로 안착할 때
목표 초과와 복원을 그래프로 설명할 때

Reveal a small object or settle it into a selected state.
Explain overshoot and recovery with a graph.

과용 주의AvoidAVOID

본문 전체에 반복 적용하지 않는다
초과 크기가 주변 요소와 겹치지 않게 여백을 둔다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

먹 블록이 scale 0에서 1.08까지 커졌다가 1.00으로 안착하고 그래프의 초과 구간만 주홍이 된다

과용 · 나쁜 사례OVERUSE

크기를 1.4까지 키워 주변 문장을 덮거나 여러 번 흔들려 읽기를 방해한다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
도착 지속	1.4s	0.8~1.6s	초과와 복귀를 모두 포함한다
Back 계수	1.5	1.0~2.0	1.5일 때 최대 scale 1.08이다
크기 범위	0→1.00	0~1.00	중심을 기준으로 크기를 바꾼다
시작 시각	0.30s	0.20~0.40s	완료 뒤 3초까지 정지한다

GSAP

const state = {t:0};
const spring = t => 1 + 2.5*(t-1)**3 + 1.5*(t-1)**2;
tl.to(state, {t:1, duration:1.4, ease:'none', onUpdate:() => {
  gsap.set('#card', {scale:spring(state.t)});
  update(); // 누적 길이로 그래프 strokeDashoffset과 값 표시 동기화
}}, 0.3);

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

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>을 먹 블록으로 표현하고 0.3초부터 1.4초 동안 scale 0에서 1로 back.out(1.5) 도착을 만들어줘. 최대 크기는 1.08이며 옆 시간 그래프와 크기 숫자를 같은 프록시 값으로 갱신해. 그래프의 1.00 초과 구간만 주홍으로 그리고 2.05초부터 3초까지 완성 상태를 유지해.

Represent <target> as an ink-black block and animate scale from 0 to 1 with back.out(1.5), starting at 0.3 seconds over 1.4 seconds. The maximum scale is 1.08. Update the adjacent time graph and scale readout from the same proxy value. Draw only the graph segment above 1.00 in vermilion, and hold the completed state from 2.05 to 3 seconds.

Codex

<파일>의 .scene에 먹 블록과 scale 시간 그래프를 배치해. paused GSAP 타임라인의 0.3초부터 1.4초 동안 t를 0→1로 구동하고 scale=1+2.5*(t-1)^3+1.5*(t-1)^2를 적용해. SVG pathLength 1의 strokeDashoffset을 누적 경로 길이로 갱신하되 소수 값을 반올림하지 마. 0.73초에 부분 그래프, 1.14초에 최대 1.08, 2.9초에 1.00 안착과 주홍 초과 구간을 캡처해 확인해.

Place an ink-black block and a scale-over-time graph in .scene in <file>. In a paused GSAP timeline, drive t from 0 to 1 starting at 0.3 seconds over 1.4 seconds, and apply scale=1+2.5*(t-1)^3+1.5*(t-1)^2. Update strokeDashoffset on an SVG with pathLength 1 using cumulative path length, without rounding fractional values. Capture at 0.73 seconds for the partial graph, 1.14 seconds for the maximum 1.08, and 2.9 seconds for the settled 1.00 scale and vermilion overshoot segment.