Gsap
GSAP animation reference for HyperFrames.
Install
npx skills add nateherkai/herk-edit-kit --skill gsap -g -a claude-code -y- Repository
- nateherkai/herk-edit-kit2.5k
- Category
- Design
- Updated
- 21d ago
- License
- See repository
- Context cost
- Mediumabout 1,500 tokens
- Runs scripts
- Yes, review before use
What it does
GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.
GSAP
Core Tween Methods
- gsap.to(targets, vars), animate from current state to
vars. Most common. - gsap.from(targets, vars), animate from
varsto current state (entrances). - gsap.fromTo(targets, fromVars, toVars), explicit start and end.
- gsap.set(targets, vars), apply immediately (duration 0).
Always use camelCase property names (e.g. backgroundColor, rotationX).
Common vars
- duration, seconds (default 0.5).
- delay, seconds before start.
- ease,
"power1.out"(default),"power3.inOut","back.out(1.7)","elastic.out(1, 0.3)","none". - stagger, number
0.1or object:{ amount: 0.3, from: "center" },{ each: 0.1, from: "random" }. - overwrite,
false(default),true, or"auto". - repeat, number or
-1for infinite. yoyo, alternates direction with repeat. - onComplete, onStart, onUpdate, callbacks.
- immediateRender, default
truefor from()/fromTo(). Setfalseon later tweens targeting the same property+element to avoid overwrite.
Transforms and CSS
Prefer GSAP's transform aliases over raw transform string:
| GSAP property | Equivalent |
|---|---|
x, y, z | translateX/Y/Z (px) |
xPercent, yPercent | translateX/Y in % |
scale, scaleX, scaleY | scale |
rotation | rotate (deg) |
rotationX, rotationY | 3D rotate |
skewX, skewY | skew |
transformOrigin | transform-origin |
