효과Effects / UI 시연UI Demo / Nº 355

토글 슬라이드Toggle Slide

Toggle Slide

토글 슬라이드

다른 이름Also known as · Toggle flip · 토글 전환 · Switch thumb travel · 스위치 손잡이 이동 · Animated Toggle · 토글 상태 전환

355

렌더 추가 예정CLIP COMING토글 슬라이드Toggle Slide정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 355. 토글 슬라이드 · Toggle Slide · power3.out

스위치 손잡이가 이동해 약간 지나쳤다 돌아오고 트랙 색이 바뀐다.A switch thumb travels and settles as the track changes color.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

켜짐과 꺼짐의 전환을 촉각적으로 전달한다.Provides a tactile cue for an on or off state.

언제 쓰나Use whenUSE WHEN

설정의 켜짐 상태를 안내할 때
두 가지 옵션의 전환을 시연할 때

Explain an enabled setting.
Demonstrate switching between two options.

과용 주의AvoidAVOID

상태 구분을 색상 하나에 의존하지 않는다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

손잡이가 40px 이동하고 6% 지나쳤다가 켜짐 위치에 멈춘다

과용 · 나쁜 사례OVERUSE

트랙만 색이 바뀌어 선택 상태가 색각에 의존한다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
손잡이 이동	400ms	250~500ms	정착 포함
이동 거리	40px	24~64px	트랙 내부 이동폭
오버슛	6%	0~8%	최종 이동폭 기준
트랙 색	200ms	150~300ms	켜짐 색 전환

GSAP

.thumb { animation: switch-on 400ms both; }
.track { transition: background-color 200ms; }
.track.on { background-color: #2563eb; }
@keyframes switch-on {
  0% { transform: translateX(0); }
  70% { transform: translateX(42.4px); }
  100% { transform: translateX(40px); }
}

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 토글 슬라이드을 적용한다. 손잡이를 400ms 동안 40px 이동하고 42.4px에서 되돌아오며 트랙 색은 200ms에 바꾼다. 초기 상태를 명시한 paused 타임라인으로 만들고 고정 좌표와 시간만 사용해 seek를 재현한다.

Apply Toggle Slide to <target> in <file>. Move the thumb 40px over 400ms with a 42.4px overshoot, and change the track color over 200ms. Define the initial state and use a paused timeline with fixed coordinates and timings for repeatable seeking.

Codex

<파일>에서 <대상>의 토글 슬라이드 장면에 적용한다. 손잡이를 400ms 동안 40px 이동하고 42.4px에서 되돌아오며 트랙 색은 200ms에 바꾼다. 0.10초·0.26초·0.60초 시점을 캡처해 시작 상태, 중간 관계, 최종 정착과 겹침 여부를 확인한다.

Implement Toggle Slide in the scene for <target> in <file>. Move the thumb 40px over 400ms with a 42.4px overshoot, and change the track color over 200ms. Capture at 0.10s, 0.26s, 0.60s to verify the initial state, intermediate relationships, final settling, and unwanted overlap.