이미지를 드래그하거나 다른 레이아웃 대상으로 전환합니다.
Draggable · Flip · GSAP · JavaScript
이럴 때 사용하세요
GSAP을 사용하기로 정한 프로젝트에서 플러그인별 구현 예제와 관련 문서를 찾을 때 사용합니다.
적용 순서
- 플러그인이나 필요한 효과로 예제를 탐색합니다.
- 개별 데모의 CodePen과 문서를 함께 확인합니다.
- 예제 코드·사용 플러그인·포함 이미지의 조건을 확인하고 프로젝트에서 실행합니다.
자료 설명
모션 예제를 플러그인과 목적에 따라 찾아보는 공식 허브입니다. 개별 데모의 실행 위치와 기술 문서를 함께 연결해 구현 맥락을 확인할 수 있습니다.
적용 전 확인할 점
React·Next·Svelte·Vue 시작 링크는 지원 안내입니다. 개별 데모가 해당 프레임워크로 작성됐다고 간주하지 않습니다.
관련 링크
이 모음에서 골라둔 자료
Enter And Exit
GSAP항목을 추가·제거·셔플하며 레이아웃 변화를 연결합니다.
Flip · GSAP · JavaScript
Card stack
GSAP카드 스택을 클릭해 다음 카드를 앞으로 이동시킵니다.
Flip · GSAP · JavaScript
요소를 드래그하고 관성을 적용해 움직임을 이어갑니다.
Draggable · GSAP · Inertia · JavaScript
Observe events
GSAP입력 이벤트를 감지하고 이동 방향과 반응을 확인합니다.
GSAP · JavaScript · Observer · SVG
휠 입력 방향에 따라 흐르는 텍스트의 방향을 바꿉니다.
GSAP · JavaScript · Observer
Swipe Slider
GSAP휠과 포인터 입력으로 전체 화면 슬라이드를 전환합니다.
GSAP · JavaScript · Observer · SplitText
발사 지점을 드래그하고 클릭해 입자 물리 효과를 만듭니다.
Draggable · GSAP · Inertia · JavaScript · Physics2D
선택한 분류에 맞는 항목을 필터링하며 재배치합니다.
Flip · GSAP · JavaScript
Canvas Morphs
GSAP같은 형태 변형을 SVG와 Canvas에 각각 렌더링합니다.
Canvas · GSAP · JavaScript · MorphSVG · SVG
convertToPath()
GSAP기본 SVG 도형을 경로로 바꾸고 다른 모양으로 변형합니다.
GSAP · JavaScript · MorphSVG · SVG
Shape Index
GSAPshapeIndex 값에 따라 달라지는 SVG 변형 경로를 비교합니다.
GSAP · JavaScript · MorphSVG · SVG