프런트엔드 & UI
GSAP Skills
코어 트윈부터 ScrollTrigger, React까지 아우르는 공식 GSAP 애니메이션 세트.
무엇인가
GSAP으로 웹 애니메이션을 만드는 GreenSock 공식 스킬 세트. 여덟 개 모듈이 코어 API, 타임라인, ScrollTrigger, 플러그인, React, 다른 프레임워크, 성능, 유틸리티를 다룹니다.
Bundles 8 modules: core / timeline / scrolltrigger / plugins / react / frameworks / performance / utils
Official GSAP animation skill set: core API, timelines, ScrollTrigger, plugins, React, other frameworks, performance and utils.
디자인에 왜 중요한가
- 모션이 에이전트의 문법 어림짐작이 아니라 GSAP의 실제 API를 따릅니다.
- ScrollTrigger와 타임라인이 즉흥적으로 쌓이지 않고 제대로 순서를 잡습니다.
- 성능 규칙이 애니메이션을 스크롤에서 버벅이지 않고 매끄럽게 유지합니다.
다루는 내용
- Core API
- Timelines
- ScrollTrigger
- Plugins
- React and frameworks
- Performance and utils
설치 방법
GSAP Skills
-
저장소를 클론하세요.
git clone https://github.com/greensock/gsap-skills -
Codex에 스킬 파일 경로를 지정하세요.
skills/gsap-core/SKILL.md -
그다음 원하는 UI를 설명하세요. Codex가 스킬을 따릅니다.
Codex로 실행하는 법
-
GSAP 스킬 세트를 설치해 Codex가 관련 모듈을 불러올 수 있게 하세요.
-
원하는 모션을 요청하면 알맞은 모듈이 API를 처리합니다.
-
컴포넌트 트리 안에서는 React나 프레임워크 모듈을 꺼내 쓰세요.
여기 모인 플러그인은 모두 무료 오픈소스이며, 실제 업스트림 출처로 연결됩니다.
codex-design 목록에서 더 보기 ↗다른 Codex 디자인 플러그인
프런트엔드 & UI 무엇을 하나 gpt-taste GSAP 스크롤 모션과 빈틈없는 벤토 그리드로 수상작급 랜딩 페이지를 만듭니다. 
디자인 시스템 무엇을 하나 Stitch Design Taste Google Stitch가 흔해 빠진 화면 대신 개성 있는 화면을 내놓도록 DESIGN.md를 작성합니다. 
프런트엔드 & UI 무엇을 하나 image-to-code 디자인 이미지를 먼저 생성하고 분석한 뒤, 그에 맞는 프런트엔드 코드를 만듭니다. 
프런트엔드 & UI 무엇을 하나 imagegen-frontend-mobile 프리미엄 모바일 앱 화면 플로우를 코드가 아니라 이미지로 생성합니다. 다음 단계
세팅 없이, Open Design으로 디자인하기
이 플러그인을 직접 설치해도 되고, Open Design으로 Codex 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.