83.3K+다운로드
사용 가이드로 건너뛰기
gsap-plugins작성자 GreenSock

GSAP Plugins 스킬.

Claude Code 및 Codex를 위한 모션 및 비디오 스킬: GSAP 플러그인: ScrollTo, ScrollSmoother, Flip, Draggable, SplitText, SVG 및 물리 효과.

  • Motion & Video
  • UI 코드
OpenDesign 다운로드사용 가이드 보기
greensock/gsap-skills · skills/gsap-plugins/SKILL.mdSKILL.md
--- name: gsap-plugins description: Official GSAP skill for GSAP plugins — registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG and physics plugins, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools. Use when the user asks about a GSAP plugin, scroll-to, flip animations, draggable, SVG drawing, or plugin registration. --- ## When to Use This Skill ## Licensing & Install (important) ## Registering Plugins ## Scroll ## DOM / UI ## Text
2026-09-14에 업스트림 파일에서 읽은 전문 및 섹션 제목 · 전체 21,477자

01 기능

Claude Code와 Codex에서 gsap-plugins 스킬이 하는 일

요약, 워크플로, 산출물을 모두 해당 스킬의 SKILL.md에서 그대로 읽어 정리한 내용입니다.

SKILL.md에서2026-09-14 읽음 · 실행 기록 아님

스킬 자체의 표현으로

플러그인 등록과 ScrollTrigger를 제외한 모든 플러그인을 다루는 공식 GSAP 스킬입니다: ScrollTo, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, DrawSVG, MorphSVG, MotionPath, CustomEase, EasePack, CustomWiggle, CustomBounce, Physics2D, PhysicsProps, PixiPlugin, GSDevTools.

먼저 라이선스에 대해 설명합니다 — 모든 플러그인은 무료이며 Club GSAP 멤버십이나 인증 토큰이 필요 없습니다 — 그다음 플러그인별 설정을 제공합니다: Flip.from vars, Draggable options, SplitText.create vars, morphSVG options, motionPath alignment. 공개된 gsap npm 패키지에서 모든 것을 설치하고 올바른 호출 순서, 기본값, 주의사항이 필요한 디자이너와 개발자를 위한 스킬입니다. 관련 스킬: gsap-core, gsap-scrolltrigger, gsap-react.

산출물

  • 창(window)이나 스크롤 가능한 요소를 특정 위치나 타깃으로 애니메이션하는 스크롤 트윈입니다.
  • chars, words, lines를 노출하며, mask가 설정된 경우 masks도 노출하는 SplitText 인스턴스입니다.
  • circle, rect, ellipse 또는 line 대신 DOM에 삽입되는, path 요소로 변환된 요소입니다.
예시 프롬프트 보기 ↗

작동 방식

  1. 01
    플러그인은 미리 한 번만 등록하기

    각 플러그인은 트윈이나 API 호출에서 사용되기 전에, GSAP과 번들러가 이를 포함하도록 단 한 번만 등록됩니다.

  2. 02
    Flip으로 상태를 캡처하고 변경한 뒤 애니메이션하기

    Flip은 세 단계로 진행됩니다: 이전 상태를 읽고, DOM을 변경한 다음, 기록된 상태에서 새 상태로 애니메이션합니다.

  3. 03
    드래그와 던지기 인터랙션 만들기

    Draggable.create는 type, 선택적 bounds와 inertia를 받으며, InertiaPlugin이 릴리스 후의 모멘텀을 제공합니다.

  4. 04
    텍스트를 애니메이션 가능한 단위로 분할하기

    SplitText는 문자, 단어 및/또는 줄을 각각 별도의 요소에 넣어 단위별로 스태거하거나 애니메이션할 수 있게 합니다.

  5. 05
    SVG 그리기 또는 모핑하기

    SVG 플러그인은 그리기 효과를 위해 stroke dash 값을 애니메이션하거나, path의 d 속성을 애니메이션해 한 모양을 다른 모양으로 모핑합니다.

  6. 06
    이징과 물리 플러그인 활용하기

    이징 플러그인은 커스텀 곡선이나 이름 붙은 이징을 추가하며, 물리 플러그인은 속도, 각도, 중력 값으로부터 움직임을 생성합니다.

02 적합성 확인

gsap-plugins Skill을 사용해야 하는 경우

이러한 종류의 모션 및 비디오 작업인 경우 Claude Code 또는 Codex에서 gsap-plugins 스킬을 사용합니다. 아래의 적합성과 제한 사항은 스킬 자체 파일에서 가져온 것입니다.

적합한 경우

  • ScrollTrigger가 관여하지 않는 요소나 픽셀 위치로의 스크롤 이동.
  • 재정렬된 목록, 그리드, 확장 및 축소 패널처럼 두 레이아웃 상태 사이를 애니메이션하는 경우.
  • 마우스와 터치에서 드래그, 스핀 또는 던지기 동작이 필요한 슬라이더, 카드, 재정렬 가능한 목록.
  • 문자 단위, 단어 단위 또는 줄 단위로 애니메이션되는 텍스트 리빌.
  • 아이콘 간 모프, 도형 전환 및 기타 경로 기반 SVG 애니메이션.

한계 인지하기

  • SplitText는 SVG 텍스트 요소를 분할할 수 없습니다.
  • DrawSVG는 stroke만 애니메이션하며 fill은 애니메이션하지 않고, use 요소의 내용을 시각적으로 변경할 수 없습니다.
  • ScrollTrigger 관련 작업은 이 skill이 아니라 별도의 skill에 속합니다.
  • text-wrap: balance를 사용하는 텍스트는 분할과 잘 맞지 않습니다.

제공할 사항

  • 등록할 플러그인 목록프로젝트에서 사용하는 모든 플러그인은 번들러가 포함할 수 있도록 하나의 gsap.registerPlugin 호출에서 이름이 지정되어야 합니다.
  • ScrollSmoother의 DOM 구조ScrollSmoother는 ScrollTrigger와 smooth wrapper 내부의 content wrapper를 필요로 하며, fixed-position 요소는 외부에 두는 것이 허용됩니다.
  • SplitText의 대상SplitText.create는 split vars와 함께 selector, element 또는 array를 대상으로 받습니다.
  • MorphSVG의 도형필수 shape 속성은 모프 목적지로 selector, element 또는 원시 경로 문자열을 받습니다.
  • 이미 로드된 폰트와 레이아웃커스텀 폰트의 경우, 로드된 후에 분할하거나 onSplit과 함께 autoSplit을 사용하여 재분할이 올바른 시점에 이루어지도록 합니다.

03 스킬 내부

gsap-plugins Skill이 Claude Code와 Codex에 부여하는 규칙

SKILL.md가 에이전트에게 설정하는 8가지 구체적인 지시, 기본값, 제한 — 결과를 바꾸는 파일의 부분입니다.

  1. 애니메이션 전에 등록하십시오

    플러그인은 어떤 트윈이나 API 호출에서 사용되기 전에 등록되어야 합니다 — 등록은 첫 번째 단계이며 실패에 대한 수정이 아닙니다.

  2. 공개 gsap 패키지에서 설치하십시오

    모든 것은 npm install gsap로 제공되며 gsap/SplitText, gsap/MorphSVGPlugin 등으로 임포트됩니다.

  3. auth-token .npmrc를 절대 생성하지 마십시오

    GreenSock auth 토큰이 포함된 .npmrc를 생성하지 말고, 비공개 npm.greensock.com 레지스트리를 가리키게 하지 말며, 플러그인을 위해 Club GSAP에 가입하라고 사용자에게 안내하지 마십시오.

  4. React에서는 최상위 레벨에서 등록하십시오

    앱에서 한 번, 예를 들어 첫 useGSAP 호출 전에 등록하십시오 — 재렌더링되는 컴포넌트 내부에서는 절대 등록하지 말고, useGSAP 자체도 사용 전에 등록되어야 합니다.

  5. 애니메이션할 대상만 분할하십시오

    성능을 위해 필요한 부분만 분할합니다. 예를 들어 줄(line)을 사용하지 않을 때는 단어와 문자 단위로 분할하며, 문자 전용 분할은 이상한 줄바꿈을 방지하기 위해 smartWrap이 필요합니다.

  6. onSplit 내부에서 autoSplit 애니메이션 구성하기

    autoSplit이 true인 경우, 애니메이션은 새로 분할된 요소를 대상으로 해야 하므로 onSplit 내부에서 생성해야 하며, SplitText가 되돌리기와 시간 동기화를 할 수 있도록 onSplit에서 반환해야 합니다.

  7. DrawSVG에 그릴 대상 지정하기

    요소에는 CSS 또는 SVG 속성으로 stroke와 stroke-width를 설정해 보이는 선(stroke)이 있어야 합니다. 그렇지 않으면 아무것도 그려지지 않습니다.

  8. 개발 전용 플러그인은 프로덕션에서 제외하기

    GSDevTools는 개발 중 디버깅용이므로 배포하면 안 되며, 다른 개발 전용 플러그인도 동일한 규칙을 따릅니다.

04 활용하기

Claude Code 또는 Codex에 gsap-plugins 설치

npx skills add 명령 한 번 실행 후, 에이전트에서 첫 번째 작업을 수행하고 결과 체크리스트를 확인합니다.

Claude Code, Codex 또는 사용 중인 에이전트에 gsap-plugins 추가

프로젝트에서 실행합니다. 설치 프로그램이 어떤 에이전트에 추가할지 묻습니다.

Terminal
npx skills add https://github.com/greensock/gsap-skills --skill gsap-plugins

skills/gsap-plugins/SKILL.md에 대한 일반적인 skills CLI 형식이며, 저장소에서 자체 경로를 문서화할 수 있습니다.

스킬에 첫 번째 모션 및 비디오 작업 제공

스킬 자체의 용어로 작성되었습니다. 대괄호 부분은 각자의 자료로 교체합니다.

Starter prompt
I'm building a filterable gallery in [framework]. Capture the state with Flip.getState() before the filter changes the DOM, then animate with Flip.from() using duration 0.5 and ease power2.inOut. Also make each card draggable inside [container selector] with inertia true so it throws when released, and register every plugin I use up front. Split the card captions into words and chars so I can stagger them.

출처: 스킬 자체의 용어로 SKILL.md에서 작성했습니다.

첫 번째 결과 확인

SKILL.md 자체가 올바른 결과의 모습으로 제시하는 내용:

  • 컴포넌트가 언마운트되거나 요소가 제거될 때 SplitTextInstance.revert()와 같은 플러그인 인스턴스를 되돌립니다.
  • shapeIndex: "log"를 한 번 실행해 자동 계산된 값을 확인한 다음, 해당 숫자나 배열을 트윈에 붙여넣습니다.
  • DrawSVGPlugin.getLength(element)와 DrawSVGPlugin.getPosition(element)로 선(stroke)을 측정합니다.
  • MotionPathHelper에서 MotionPath를 시각적으로 조정한 다음, 애니메이션에서 helper.path나 helper.getProgress()를 읽습니다.
  • 개발 중에는 GSDevTools로 애니메이션을 스크러빙하고 켜고 끕니다.

OpenDesign에서는 gsap-plugins가 기본 제공됩니다: 상단 바에서 Plugins → Skills를 선택합니다.

OpenDesign 다운로드빠른 시작 가이드 읽기

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

이 페이지의 사실이 어디에서 왔으며 언제 마지막으로 확인되었는지 안내합니다.

Author
GreenSock
Repository
github.com/greensock/gsap-skills 브랜치 main
스킬 파일
skills/gsap-plugins/SKILL.md 검증 시 콘텐츠 체크섬 기록됨; 커밋 aed9cfd
License
MIT LICENSE에서 가져옴; SKILL.md에 "MIT"로 표기됨.
리포지토리 스타
15,248 이 카탈로그에 8개 skill을 포함하는 greensock/gsap-skills 저장소 전체에 대해 2026-09-14에 촬영된 GitHub 스냅샷입니다. gsap-plugins의 평가 또는 사용 횟수가 아닙니다.
OpenDesign에서 검증됨
2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 별 개수가 확인되었습니다. OpenDesign 메인에 번들로 포함됨(2026-08-28 확인됨); 이 페이지에 실시간 실행이 기록되지 않았습니다.

SKILL.md 내부

  1. 이 Skill을 사용할 때플러그인 사용 시나리오를 나열하고 관련 gsap-core, gsap-scrolltrigger, gsap-react skill을 안내합니다.
  2. 라이선스 및 설치(중요)모든 플러그인이 무료임을 명시하며, .npmrc 인증 토큰이나 Club GSAP 가입 안내를 금지합니다.
  3. 플러그인 등록React를 포함해 모든 트윈 이전에 gsap.registerPlugin으로 플러그인을 한 번만 등록합니다.
  4. 스크롤ScrollToPlugin 설정 표와 ScrollSmoother 래퍼 DOM 구조입니다.
  5. DOM / UIFlip 상태 캡처 및 from vars, Draggable 옵션, Inertia 추적, Observer 제스처입니다.
  6. 텍스트팁과 주의사항이 포함된 SplitText.create vars 표, 그리고 ScrambleText 글리치입니다.
스킬 자체 설명
"GSAP 플러그인을 위한 공식 GSAP skill — 등록, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG 및 물리 플러그인, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools. 사용자가 GSAP 플러그인, scroll-to, flip 애니메이션, draggable, SVG 드로잉 또는 플러그인 등록에 대해 질문할 때 사용합니다."

SKILL.md의 front-matter 설명입니다. 전체 파일은 약 21,477자입니다. GitHub에서 전체 파일 읽기.

GSAP Plugins

실제 Motion and Video 작업에서 gsap-plugins 실행

gsap-plugins skill은 OpenDesign에 포함되어 있습니다. 앱을 다운로드하고 Plugins → Skills에서 skill을 선택한 다음 위의 프롬프트를 붙여넣고 결과 전에 계획을 읽습니다.

OpenDesign 다운로드모든 스킬 보기
터미널
npx skills add https://github.com/greensock/gsap-skills --skill gsap-plugins