98.8K+다운로드
사용 가이드로 건너뛰기
gsap-framer-scroll-animation작성자 GitHub

GSAP Framer Scroll Animation 스킬.

모션 및 비디오를 위한 Claude Code 및 Codex 스킬: 패럴랙스, 고정 섹션, 가로 스크롤 및 텍스트 스크롤 애니메이션.

  • Motion & Video
  • UI 코드
OpenDesign 다운로드사용 가이드 보기
github/awesome-copilot · skills/gsap-framer-scroll-animation/SKILL.mdSKILL.md
--- name: gsap-framer-scroll-animation description: - Use this skill whenever the user wants to build scroll animations, scroll effects, parallax, scroll-triggered reveals, pinned sections, horizontal scroll, text animations, or any motion tied to scroll position — in vanilla JS, React, or Next.js. Covers GSAP ScrollTrigger (pinning, scrubbing, snapping, timelines, horizontal scroll, ScrollSmoother, matchMedia) and Framer Motion / Motion v12 (useScroll, useTransform, … --- ## Quick Library Selector ## Setup (Always Do First) ## Workflow ## The 5 Most Common Scroll Patterns ## Critical Rules (Apply Always) ## Copilot Prompting Tips
2026-09-14에 업스트림 파일에서 읽은 머리말 및 섹션 제목 · 전체 6,365자

01 기능

Claude Code와 Codex에서 gsap-framer-scroll-animation 스킬이 하는 일

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

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

스킬 자체의 표현으로

이 스킬은 GSAP ScrollTrigger와 Framer Motion을 사용하여 프로덕션 수준의 스크롤 애니메이션을 구현합니다. 바닐라 JavaScript, React, Next.js 프로젝트를 위한 패럴랙스 효과, 스크롤 트리거 리빌, 고정 섹션, 가로 스크롤, 텍스트 애니메이션을 다룹니다. 이 스킬에는 GSAP(바닐라 JS, Webflow, Vue, 핀 고정, 복잡한 타임라인용)와 Framer Motion(React/Next.js 선언적 스타일용) 중에서 선택할 수 있는 Quick Library Selector가 포함되어 있습니다.

이 스킬은 즉시 사용 가능한 코드 레시피, 별도 참조 파일에 담긴 전체 API 레퍼런스, Copilot 프롬프팅 패턴을 제공합니다. 이 스킬은 언제, 왜 애니메이션을 적용해야 하는지에 대한 창의적 철학과 디자인 원칙을 제공하는 premium-frontend-ui 스킬과 함께 사용됩니다.

산출물

  • 즉시 사용 가능한 코드 레시피를 갖춘 프로덕션 수준의 스크롤 애니메이션
예시 프롬프트 보기 ↗

작동 방식

  1. 01
    의도 해석 및 라이브러리 선택

    이 스킬은 사용자의 요청과 프로젝트 컨텍스트를 바탕으로 GSAP와 Framer Motion 중 어느 것이 가장 적합한지 먼저 판단합니다.

  2. 02
    참조 문서 읽기

    세부 API와 구현 패턴을 위해 references 디렉터리 내 관련 참조 문서를 확인합니다.

  3. 03
    패키지 설치 제안

    프로젝트에 아직 존재하지 않는 경우, 필요한 npm 패키지를 제안합니다.

  4. 04
    애니메이션 스캐폴드 구현

    React 컴포넌트, 훅, 바닐라 JavaScript 중 요청된 형식에 맞춰 애니메이션 구조를 스캐폴딩합니다.

  5. 05
    접근성을 고려한 도구 적용

    적절한 스크롤 또는 in-view 도구를 적용하며, 접근성 옵션이 마련되어 있고 훅이 무한 리렌더링을 일으키지 않도록 합니다.

02 적합성 확인

gsap-framer-scroll-animation Skill 사용 시점

모션 및 비디오 작업이 이러한 유형일 때 Claude Code 또는 Codex에서 gsap-framer-scroll-animation skill을 사용하십시오. 적합성과 제한 사항은 skill 자체 파일에서 가져옵니다.

적합한 경우

  • 바닐라 JS, React, Next.js에서 스크롤 애니메이션, 스크롤 트리거 리빌, 패럴랙스 효과, 고정 섹션, 가로 스크롤, 텍스트 애니메이션 구축
  • '스크롤에 맞춰 애니메이션 적용', '스크롤할 때 페이드인', '애플처럼 스크롤되게 만들기', '패럴랙스 효과', '스티키 섹션', '등장 애니메이션' 같은 사용자 요청
  • Copilot 프롬프트 패턴으로 GSAP 또는 Framer Motion 코드 생성하기

한계 인지하기

  • GSAP 필요SKILL.md에서 이 의존성을 명시합니다. 프로젝트에 GSAP가 없으면 스킬이 작동하지 않습니다.

제공할 사항

  • 전체 선택자, 기준 이미지, 스크롤 범위모호한 프롬프트는 모호한 코드를 만들어내기 때문에, Copilot에는 전체 선택자, 기준 이미지, 스크롤 범위를 처음부터 완전히 제공해야 합니다.
  • GSAP 관련 매개변수GSAP 구현의 경우 선택자, start/end 문자열, scrub 또는 toggleActions 사용 여부를 명시해야 합니다.
  • Framer Motion 관련 매개변수Framer 구현의 경우 사용할 훅(useScroll 또는 whileInView), offset 값, 무엇을 변형할지를 명시해야 합니다.
  • 정확한 오류 메시지Copilot에 문제 해결을 요청할 때는 정확한 오류 메시지를 그대로 붙여넣으면 훨씬 더 나은 수정 결과를 얻을 수 있습니다.

03 스킬 내부

gsap-framer-scroll-animation 스킬이 Claude Code와 Codex에 제공하는 규칙

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

  1. ScrollTrigger 플러그인을 먼저 등록하기

    GSAP는 ScrollTrigger 기능을 사용하기 전에 gsap.registerPlugin(ScrollTrigger)를 호출해야 합니다.

  2. Scrub 사용 시 Ease None 사용하기

    GSAP에서 scrub이 활성화된 경우, 스크러빙 시 이징이 부자연스럽게 느껴지므로 항상 ease: 'none'을 사용해야 합니다.

  3. React에서 useGSAP 사용하기

    React에서는 일반 useEffect 대신 @gsap/react의 useGSAP를 사용해야 합니다. ScrollTrigger를 자동으로 정리해주기 때문입니다.

  4. 개발 중에만 마커 추가하기

    GSAP 디버그 마커는 개발 중에는 markers: true로 추가하되, 프로덕션에 배포하기 전에 제거해야 합니다.

  5. useTransform 출력은 style 속성에 넣기

    Framer Motion의 useTransform 출력은 일반 div가 아닌 motion.* 요소의 style 속성에 배치해야 합니다.

  6. Next.js에서 Use Client 지시문 추가하기

    motion 훅을 사용하는 모든 Next.js 파일 상단에는 'use client'가 있어야 합니다.

  7. Transform과 Opacity만 애니메이션합니다

    transform과 opacity 속성만 애니메이션 처리하십시오. 성능을 위해 width, height, box-shadow는 애니메이션 대상으로 삼지 마십시오.

  8. prefers-reduced-motion 확인하기

    접근성 요구사항을 존중하기 위해 항상 prefers-reduced-motion 사용자 설정을 확인해야 합니다.

04 활용하기

Claude Code 또는 Codex에서 gsap-framer-scroll-animation 설치

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

Claude Code, Codex 또는 사용자의 Agent에 gsap-framer-scroll-animation 추가

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

Terminal
npx skills add https://github.com/github/awesome-copilot --skill gsap-framer-scroll-animation

skills/gsap-framer-scroll-animation/SKILL.md에 대한 일반적인 skills CLI 형식입니다. 리포지토리에서 자체 경로를 문서화할 수 있습니다.

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

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

Starter prompt
Create a pinned hero section with a parallax background image that scales and fades as I scroll down. The hero should pin for 200% of viewport height, with the image starting at scale 1 and ending at 1.3 while opacity drops to 0. Add a fade-in for the headline text that appears after 30% of the scroll range. Use [hero-background.jpg] as the image source.

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

첫 번째 결과 확인

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

  • ScrollTrigger를 사용하기 전에 gsap.registerPlugin(ScrollTrigger)가 호출되는지 확인하십시오

OpenDesign에서 gsap-framer-scroll-animation을 SKILL.md 링크에서 가져오십시오: Plugins → Add → Skill → Import from link, 그런 다음 상단 바에서 선택하십시오.

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

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

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

Author
GitHub
Repository
github.com/github/awesome-copilot 브랜치 main
스킬 파일
skills/gsap-framer-scroll-animation/SKILL.md 검증 시 기록된 콘텐츠 체크섬; 커밋 1899b18
License
MIT LICENSE에서 확인
리포지토리 스타
38,981 이 카탈로그에 6개의 skill을 포함하는 전체 github/awesome-copilot 저장소에 대해 2026-09-14에 촬영한 GitHub 스냅샷입니다. gsap-framer-scroll-animation에 대한 평가 또는 사용 횟수가 아닙니다.
OpenDesign에서 검증됨
2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 스타 수가 확인되었습니다. OpenDesign 메인에 번들로 포함되지 않음(2026-08-28 확인); 이 페이지에 실제 실행 기록이 없습니다.

SKILL.md 내부

  1. 빠른 라이브러리 선택 가이드프레임워크와 애니메이션 복잡도에 따라 사용 사례를 GSAP 또는 Framer Motion에 매핑하는 표
  2. 설정(항상 먼저 수행)플러그인 등록을 포함한 GSAP 및 Framer Motion 설치 명령어와 필수 import
  3. 워크플로의도 해석부터 접근성 옵션을 적용한 도구 사용까지 5단계 프로세스
  4. 가장 흔한 5가지 스크롤 패턴두 라이브러리 모두에서 페이드인, 스크럽, 스크롤 연동, 고정 타임라인 패턴에 대한 코드 스니펫
  5. 중요 규칙(항상 적용)플러그인 등록, 이징, React 훅, 접근성, 성능에 관해 반드시 따라야 할 8가지 규칙
  6. Copilot 프롬프트 작성 팁더 나은 코드 생성을 위해 전체 선택자, 스크롤 범위, 오류 메시지를 포함하여 프롬프트를 구성하는 방법
  7. 참조 파일전체 API 참조와 레시피 내용을 담은 gsap.md와 framer.md를 나열한 표
  8. 관련 스킬언제, 왜 애니메이션을 적용해야 하는지를 정의하는 창의적 철학 동반 스킬로 premium-frontend-ui 스킬을 나열
스킬 자체 설명
"- 사용자가 스크롤 애니메이션, 스크롤 효과, 패럴랙스, 스크롤 트리거 표시, 고정 섹션, 수평 스크롤, 텍스트 애니메이션 또는 스크롤 위치에 연결된 모든 모션을 바닐라 JS, React 또는 Next.js에서 구축하려는 경우 이 스킬을 사용하십시오. GSAP ScrollTrigger(고정, 스크러빙, 스냅, 타임라인, 수평 스크롤, ScrollSmoother, matchMedia) 및 Framer Motion / Motion v12(useScroll, useTransform, useSpring, whileInView, variants)를 다룹니다. 사용자가 "스크롤 시 애니메이션", "스크롤하면서 페이드 인", "Apple처럼 스크롤 만들기", "패럴랙스 효과", "고정 섹션", "스크롤 진행률 표시줄" 또는 "등장 애니메이션"이라고만 말하는 경우에도 이 스킬을 사용하십시오. GSAP 또는 Framer Motion 코드 생성을 위한 Copilot 프롬프트 패턴에도 트리거됩니다. 창의적인 철학과 디자인 수준의 완성도를 위해 premium-frontend-ui 스킬과 함께 사용됩니다."

SKILL.md의 전문 설명입니다. 전체 파일은 약 6,365자입니다. GitHub에서 전체 파일 읽기.

06 설치하기 전에

gsap-framer-scroll-animation 스킬에 관한 질문

이 답변은 2026-09-14 기준으로 확인한 SKILL.md 내용을 근거로 하며, 실행 기록을 바탕으로 한 것이 아닙니다.

제 프로젝트에는 GSAP를 써야 할까요, Framer Motion을 써야 할까요?

바닐라 JS, Webflow, Vue를 사용하거나 고정(pinning), 가로 스크롤, 복잡한 타임라인이 필요할 때는 GSAP를 사용합니다. 선언적 스타일의 React 또는 Next.js 프로젝트에서 작업하거나 whileInView 진입 애니메이션을 원할 때는 Framer Motion을 사용합니다. 둘 다 동일한 Next.js 앱에서 함께 사용할 수 있습니다.

GSAP Framer Scroll Animation

실제 모션 및 비디오 작업에서 gsap-framer-scroll-animation을 실행합니다.

OpenDesign를 다운로드하고, SKILL.md 링크에서 gsap-framer-scroll-animation을 가져온 다음, 위 프롬프트를 붙여넣고 결과 전에 계획을 읽으십시오.

OpenDesign 다운로드모든 스킬 보기
터미널
npx skills add https://github.com/github/awesome-copilot --skill gsap-framer-scroll-animation

OpenDesign 데스크톱

하나의 디자인 시스템으로 모든 결과물에 브랜드 일관성을

완전한 Vibe Design Workspace에서 하나의 브랜드 규칙을 웹사이트, 슬라이드, 인터랙티브 프로토타입, 대시보드, 이미지, HTML 영상에 적용하세요. 로컬 Codex, Claude Code, Cursor 등을 연결해 무료로 제작할 수 있습니다.

  • 웹, 슬라이드, 프로토타입, 대시보드, 이미지, 영상
  • 140개+ 디자인 시스템과 전체 템플릿·스킬 라이브러리
  • 로컬 Codex 및 21개+ 코딩 에이전트 연결 · 무료
무료 다운로드

macOS, Windows 지원