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

컨트롤 연동Control Target Sync

Control Target Sync
컨트롤 연동
다른 이름Also known as · Control target sync · 조작과 결과 동기화 · Control Live Sync · 컨트롤과 결과 동기 · control-target-sync
328
렌더 추가 예정CLIP COMING컨트롤 연동Control Target Sync정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below
도판Fig. 328. 컨트롤 연동 · Control Target Sync · none

슬라이더, 입력값, 선택 상태가 바뀌는 순간 연결된 대상도 함께 변한다.A control and its dependent result change on the same progress value.

01

무엇을 전하나What it tells

전달 효과ConveysCONVEYS
조작의 결과와 인과 관계를 즉시 이해하게 한다.Makes cause and effect immediately legible.
언제 쓰나Use whenUSE WHEN
  • 설정값과 결과의 관계를 보여줄 때
  • 슬라이더로 그래프 변화를 설명할 때
  • Show how settings affect an output.
  • Explain chart changes through a slider.
과용 주의AvoidAVOID
  • 컨트롤과 결과에 별도 진행값을 사용하지 않는다
분류TagsTAGS
UI 시연UI Demo설명Explain설명 영상Explainer video제품 시연Product demo웹 UIWeb UI난이도 중급Intermediategsap
02

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

슬라이더가 이동하는 동안 대상 너비가 240px에서 480px로 함께 바뀐다

과용 · 나쁜 사례OVERUSE

손잡이가 멈춘 뒤 대상이 뒤늦게 변한다

03

파라미터Parameters

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

항목PARAM기본DEFAULT범위RANGE메모NOTE
조작1200ms800~2000ms값 변화 전체 시간
결과 지연0ms0ms같은 프레임에 반영
너비 범위240~480px120~720px결과 대상 크기
이징nonenone값과 위치 선형 대응
GSAP
tl.fromTo('.slider-thumb',{x:0},{x:360,duration:1.2,ease:'none'},0);
tl.fromTo('.target',{width:240},{width:480,duration:1.2,ease:'none'},0);
tl.fromTo('.slider-fill',{scaleX:0,transformOrigin:'left'},{scaleX:1,duration:1.2,ease:'none'},0);
README
04

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 컨트롤 연동을 적용한다. 하나의 1200ms 진행값으로 슬라이더 360px 이동과 대상 너비 240px에서 480px 변화를 지연 없이 연결한다. 초기 상태를 명시한 paused 타임라인으로 만들고 고정 좌표와 시간만 사용해 seek를 재현한다.

Apply Control Target Sync to <target> in <file>. Use one 1200ms progress interval to synchronize 360px of slider travel with a width change from 240px to 480px. Define the initial state and use a paused timeline with fixed coordinates and timings for repeatable seeking.

Codex

<파일>에서 <대상>의 컨트롤 연동 장면에 적용한다. 하나의 1200ms 진행값으로 슬라이더 360px 이동과 대상 너비 240px에서 480px 변화를 지연 없이 연결한다. 0.30초·0.78초·1.40초 시점을 캡처해 시작 상태, 중간 관계, 최종 정착과 겹침 여부를 확인한다.

Implement Control Target Sync in the scene for <target> in <file>. Use one 1200ms progress interval to synchronize 360px of slider travel with a width change from 240px to 480px. Capture at 0.30s, 0.78s, 1.40s to verify the initial state, intermediate relationships, final settling, and unwanted overlap.

05

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP
paused 타임라인에 컨트롤 연동의 초기 상태와 종료 상태를 함께 기록하고 1.20초까지 seek로 재현한다.
ReelForgeBRIEF TO VIDEO
씬 워커 브리프에 컨트롤 연동 대상 선택자와 조작 1200ms, 결과 지연 0ms, 너비 범위 240~480px를 싣고 최종 상태 유지 시간을 지정한다.
Scrolline DeckSCROLL SCRUB
진행률 0~1을 1.20초 구간에 매핑하고 선형 관계는 none으로 유지한다.
06

잘 맞는 조합Pairs well with

렌더 추가 예정CLIP COMING
차트 스크럽Chart Scrub
260
Nº 260차트 스크럽Chart ScrubChart Scrub
카운트업 · Count-up
Nº 242카운트업Count-upCount-up
07

출처Sources

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