Gsap

frontend-dev는 세련되고 프로덕션에 바로 올릴 수 있는 웹 페이지를 만드는 프론트엔드 개발 스킬입니다. 프리미엄 UI, 시네마틱 모션, AI 생성 미디어, 설득력 있는 카피, 생성형 아트까지 함께 다뤄 랜딩 페이지, 마케팅 사이트, 제품 페이지, 대시보드 등 디자인·콘텐츠·구현 디테일이 서로 어긋나면 안 되는 프론트엔드 작업에 적합합니다.

gsap-frameworks는 Vue, Nuxt, Svelte, SvelteKit 등 React가 아닌 프레임워크를 위한 GSAP 스킬입니다. 컴포넌트 애니메이션이 Frontend Development에서 올바르게 동작하도록, 라이프사이클에 안전한 애니메이션 초기화, 스코프가 지정된 셀렉터, 그리고 언마운트 시 정리를 다룹니다.

gsap-performance는 Frontend Development를 위한 GSAP 성능 스킬입니다. 렌더링 끊김을 줄이고, 레이아웃 스래싱을 피하며, transform과 opacity를 우선하고, will-change를 적절히 적용하고, 읽기와 쓰기를 배치해 더 부드러운 60fps 애니메이션을 만드는 데 사용하세요. 기존 모션 코드에 대해 실무적인 gsap-performance 활용 가이드가 필요할 때 가장 잘 맞습니다.

gsap-react는 React와 Next.js를 위한 공식 GSAP 스킬입니다. useGSAP(), refs, gsap.context(), 스코프가 적용된 셀렉터, 정리(cleanup)까지 다루어 리렌더나 언마운트 버그 없이 React에 안전한 애니메이션을 만들 수 있게 해줍니다. 프런트엔드 개발에서 설치와 사용법이 필요할 때 이 gsap-react 가이드를 활용하세요.

GSAP 유틸리티 헬퍼용 gsap-utils 스킬입니다: clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, pipe. Frontend Development에서 gsap-utils를 어떻게 쓰는지 배우고, 재사용 가능한 함수 형태를 언제 사용해야 하는지, 헬퍼를 tween과 콜백에 어떻게 자연스럽게 넣는지, 그리고 왜 별도 등록이 필요 없는지 확인하세요.

gsap-plugins는 프론트엔드 개발자가 GSAP 플러그인을 올바르게 선택, 설치, 활용하도록 돕습니다. 플러그인 등록과 import 방법은 물론 ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG 플러그인, easing 도구, GSDevTools까지 실무적으로 다룹니다. 일반적인 애니메이션 조언보다 gsap-plugins에 맞는 명확한 가이드가 필요할 때 유용합니다.

gsap-scrolltrigger는 스크롤 연동 애니메이션, 고정(pinning), 스크럽 동작, 뷰포트 기반 트리거를 위한 GSAP 공식 스킬입니다. gsap-scrolltrigger 가이드, 설치 도움말, 또는 패럴랙스·고정 섹션·스크롤 구동 모션에 대한 실전 사용법이 필요할 때 Frontend Development에 활용하세요.

gsap-timeline은 GSAP 타임라인 시퀀스를 순서가 있는 단계, 겹침, 레이블, 중첩 재생으로 구성하는 데 도움을 줍니다. 여러 애니메이션을 조율해야 할 때, 특히 UI 디자인, 온보딩 흐름, 반복 가능한 모션 시스템에 적합한 gsap-timeline 스킬을 사용하세요. 명확한 순서 제어를 위한 gsap-timeline 설치 및 사용 가이드도 포함되어 있습니다.

gsap-core 기술은 GSAP의 핵심 애니메이션 API 사용을 위한 공식 가이드로, `gsap.to()`, `from()`, `fromTo()`, 이징, 스태거, 기본값, 반응형 모션을 포함합니다. vanilla JS, React, Vue, Svelte, DOM, SVG, UI Design 워크플로에서 gsap-core를 사용할 때 유용하며, 특히 믿을 수 있는 gsap-core 가이드가 필요할 때 적합합니다.

hyperframes-registry는 재사용 가능한 HyperFrames 레지스트리 항목을 더 적은 시행착오로 설치하고 연결하는 데 도움이 됩니다. `hyperframes add`를 실행하고, block과 component를 구분하며, snippet을 병합하고, block을 `index.html`에 연결하고, 디자인 구현과 레지스트리 탐색을 위해 `hyperframes.json` 경로 매핑을 따를 때 사용하세요.

gsap은 HyperFrames 컴포지션을 위한 실용적인 애니메이션 레퍼런스입니다. gsap.to(), from(), fromTo(), gsap.timeline() 중 무엇을 쓸지 판단하고, 적절한 vars, easing, stagger, transform, 성능 패턴을 적용하는 데 도움이 됩니다. 진입 애니메이션, 전환, 재사용 가능한 디자인 효과처럼 구현 가능한 모션이 필요할 때 이 gsap 가이드를 사용하세요.

hyperframes는 HyperFrames에서 HTML 기반 비디오 컴포지션을 만드는 워크플로 스킬입니다. 제목 카드, 오버레이, 자막, 보이스오버, 오디오 반응형 모션, 장면 전환처럼 구조화된 코드 우선 hyperframes가 필요할 때 사용하세요. 일반적인 프롬프트만으로 만드는 비디오 요청보다 레이아웃, 타이밍, 애니메이션 결정을 더 중시합니다.

gpt-taste는 세련된 UI 페이지를 만들기 위한 디자인 중심 스킬로, 편집적 아트 디렉션, 간결한 여백 규칙, GSAP 모션을 활용합니다. 마케팅 페이지, 랜딩 페이지, 쇼케이스 사이트처럼 더 다양한 레이아웃, 더 정교한 타이포그래피 제어, 덜 평범한 프런트엔드 패턴이 필요할 때 gpt-taste 스킬을 사용하세요. 이 가이드는 실무 적용을 위한 설치 및 사용 노트도 포함합니다.

fixing-motion-performance는 기본적으로 기술 스택을 바꾸지 않고 UI 애니메이션 성능 문제를 점검하고 수정하는 데 도움을 줍니다. 모션이 끊기거나, 스크롤 연동 효과가 비싸거나, 트랜지션이 layout, paint, compositing 작업을 유발할 때 프론트엔드 작업에 사용하세요. 애니메이션 버그를 명확한 코드 수준의 수정안으로 정리해 줍니다.