Agent skill · design visual · aiskillstore
gsap
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.
Why this skill is useful
Provides specific GSAP animation patterns and methods that enhance animation capabilities in HyperFrames compositions.
What it needs
About 3k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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 autoAlpha — prefer over opacity. At 0: also sets visibility: hidden. CSS variables — "--hue": 180. svgOrigin (SVG only) — global SVG coordinate space origin. Don't combine with transformOrigin. Directional rotation — "360cw", "-170short", "90ccw". clearProps — "all" or comma-separated; removes inline styles on complete. Relative values — "+=20", "-=10", "=2". Function-Based Values Easing Built-in eases: power1–power4, back, bounce, circ, elastic, expo, sine. Each has .in, .out, .inOut. Defaults Controlling Tweens gsap.matchMedia() (Responsive + Accessibility) Runs setup only when a media query matches; auto-reverts when it stops matching. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/gsap