# Gsap

GSAP animation reference for HyperFrames.

- Repository: https://github.com/nateherkai/herk-edit-kit (2482 stars)
- Category: Design
- License: see repository
- Last updated: 2026-10-14
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add nateherkai/herk-edit-kit --skill gsap -g -a claude-code -y`
Codex: `npx skills add nateherkai/herk-edit-kit --skill gsap -g -a codex -y`
Cursor: `npx skills add nateherkai/herk-edit-kit --skill gsap -g -a cursor -y`
Gemini CLI: `npx skills add nateherkai/herk-edit-kit --skill gsap -g -a gemini-cli -y`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# GSAP

## Core Tween Methods

- **gsap.to(targets, vars)**, animate from current state to `vars`. Most common.
- **gsap.from(targets, vars)**, animate from `vars` to 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.1` or object: `{ amount: 0.3, from: "center" }`, `{ each: 0.1, from: "random" }`.
- **overwrite**, `false` (default), `true`, or `"auto"`.
- **repeat**, number or `-1` for infinite. **yoyo**, alternates direction with repeat.
- **onComplete**, **onStart**, **onUpdate**, callbacks.
- **immediateRender**, default `true` for from()/fromTo(). Set `false` on 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    |

The rest: https://github.com/nateherkai/herk-edit-kit/blob/HEAD/.agents/skills/gsap/SKILL.md