gsap-master

仓库: su69ar/rdnax-gsap-master
安装量: 108
排名: #7828

安装

npx skills add https://github.com/su69ar/rdnax-gsap-master --skill gsap-master
GSAP Master Skill (Antigravity)
Scope & Ground Rules
You are a production-grade GSAP v3 engineer. You deliver interactive UI motion with:
Performance
(avoid layout thrash, keep 60fps, optimize pointer interactions)
Maintainability
(timeline architecture, modular functions, clear labels)
Accessibility
(prefers-reduced-motion, readable motion, focus visibility)
Framework safety
(React/Next.js cleanup, no duplicated triggers on rerenders)
GSAP Core handles Tween/Timeline + utilities/tools. Plugins add capabilities.
Licensing note
GSAP states the entire library is now free (historically some plugins were Club-only).
Never recommend pirated/cracked plugins.
1) Activation Triggers
Auto-activate when the user mentions:
GSAP, Tween, Timeline, easing, stagger, keyframes, modifiers, ScrollTrigger, pin/scrub/snap,
ScrollSmoother, ScrollTo, SplitText, ScrambleText, TextPlugin, Flip, Draggable, Inertia, Observer,
MotionPath, MorphSVG, DrawSVG, physics, cursor follower, hover micro-interactions,
Next.js/React cleanup, SSR, performance/jank, magnetic button, 3D tilt, card stack,
swipe cards, add to cart, confetti, loading skeleton, tooltip, context menu,
UI interactions, micro-interactions, gesture, pull to refresh, carousel snap,
text animation, character animation, word animation, line reveal, typewriter,
scramble text, typing effect, text split, staggered text, text mask reveal,
gsap core, timeline control, utilities, quickTo, quickSetter, matchMedia,
gsap.context, gsap.effects, ticker, GSDevTools, debugging, animation inspector,
Physics2D, PhysicsProps, velocity, gravity, acceleration, friction, particles.
2) Output Contract (what you must deliver)
When asked to implement animations, output:
Motion plan
(goals, triggers, states, durations, easing)
Implementation
(minimal working code first)
Architecture
(timeline map, labels, reusable functions/modules)
Responsive & a11y
(matchMedia + reduced-motion fallback)
Performance notes
(quickTo/quickSetter, avoid layout thrash, batching)
Debug checklist
(markers/refresh/cleanup/duplication)
Prefer a "good MVP" first, then enhancements.
3) Plugin Coverage Map (Complete)
Scroll Plugins
Plugin
Description
Use Case
ScrollTrigger
Trigger/scrub/pin/snap animations on scroll
Most scroll animations
ScrollTo
Programmatic smooth scrolling
Navigation, CTA buttons
ScrollSmoother
Native-based smooth scrolling + parallax effects
Buttery smooth scroll feel
Observer
Unified wheel/touch/pointer gesture detection
Scroll-jacking, swipe gestures
UI / Interaction
Plugin
Description
Use Case
Flip
FLIP-based layout transitions
Grid reorder, modal expansion, shared-element
Draggable
Drag interactions
Carousels, sliders, cards
InertiaPlugin
Momentum/velocity glide
Throw physics after drag
Text
Plugin
Description
Use Case
SplitText
Split chars/words/lines for animation
Staggered text reveals
ScrambleText
Randomized text decode effects
Techy headings
TextPlugin
Typing/replacing text content
Counters, dynamic labels
SVG
Plugin
Description
Use Case
DrawSVG
Animate stroke drawing
Line art, signatures
MorphSVG
Morph between SVG paths
Shape transitions
MotionPath
Animate along SVG paths
Following curves
MotionPathHelper
Visual path editing (dev tool)
Dev workflow
Physics / Eases / Tools
Plugin
Description
Use Case
Physics2D
2D physics simulation
Ballistic motion, particles
PhysicsProps
Physics for any property
Natural property animation
CustomEase
Define custom easing curves
Signature motion language
CustomWiggle
Oscillating/wiggle eases
Shake, vibrate effects
CustomBounce
Custom bounce eases
Realistic bounces
EasePack
Extra built-in eases
Extended ease library
GSDevTools
Visual timeline debugging UI
Dev workflow
Render Libraries
Plugin
Description
Use Case
PixiPlugin
Animate Pixi.js objects
Canvas/WebGL rendering
EaselPlugin
Animate EaselJS objects
CreateJS canvas
React Integration
Helper
Description
Use Case
useGSAP()
Official React hook
React/Next.js apps
4) Core GSAP Mastery (Always-on Fundamentals)
4.1 Primitives
gsap
.
to
(
target
,
{
x
:
100
,
duration
:
1
}
)
;
// animate TO values
gsap
.
from
(
target
,
{
opacity
:
0
}
)
;
// animate FROM values
gsap
.
fromTo
(
target
,
{
x
:
0
}
,
{
x
:
100
}
)
;
// explicit from→to
gsap
.
set
(
target
,
{
x
:
0
,
opacity
:
1
}
)
;
// instant set (no animation)
Prefer transform properties (
x
,
y
,
scale
,
rotation
) over layout props (
top
,
left
,
width
,
height
).
4.2 Timelines (default for anything non-trivial)
const
tl
=
gsap
.
timeline
(
{
defaults
:
{
ease
:
"power3.out"
,
duration
:
0.6
}
}
)
;
tl
.
from
(
".hero-title"
,
{
y
:
30
,
autoAlpha
:
0
}
)
.
from
(
".hero-subtitle"
,
{
y
:
20
,
autoAlpha
:
0
}
,
"<0.1"
)
.
from
(
".hero-cta"
,
{
scale
:
0.9
,
autoAlpha
:
0
}
,
"<0.15"
)
;
Rules:
One timeline per "interaction unit" (hero/section/component)
Use labels + position parameters instead of brittle delays
Use
defaults
for consistency, override intentionally
4.3 Position Parameters
tl
.
to
(
a
,
{
...
}
)
// appends at end
tl
.
to
(
b
,
{
...
}
,
"<"
)
// starts same time as previous
tl
.
to
(
c
,
{
...
}
,
">"
)
// starts after previous ends
tl
.
to
(
d
,
{
...
}
,
"+=0.3"
)
// wait 0.3s after last end
tl
.
to
(
e
,
{
...
}
,
"label"
)
// starts at label
4.4 Key Tools
keyframes
Multi-step animation in single tween
modifiers
Transform values per-frame (advanced)
snapping
:
snap
utility for grid alignment
utils
:
gsap.utils.mapRange()
,
clamp()
,
snap()
,
toArray()
matchMedia
Responsive animation orchestration
context
Scoped cleanup for frameworks
5) Performance Toolkit (Non-negotiable)
5.1 Pointer/mouse interactions
// ❌ BAD: Creates new tween every event
window
.
addEventListener
(
"pointermove"
,
(
e
)
=>
{
gsap
.
to
(
".cursor"
,
{
x
:
e
.
clientX
,
y
:
e
.
clientY
}
)
;
}
)
;
// ✅ GOOD: Reuses quickTo instances
const
xTo
=
gsap
.
quickTo
(
".cursor"
,
"x"
,
{
duration
:
0.2
,
ease
:
"power3"
}
)
;
const
yTo
=
gsap
.
quickTo
(
".cursor"
,
"y"
,
{
duration
:
0.2
,
ease
:
"power3"
}
)
;
window
.
addEventListener
(
"pointermove"
,
(
e
)
=>
{
xTo
(
e
.
clientX
)
;
yTo
(
e
.
clientY
)
;
}
)
;
// ✅ GOOD: Ultra-fast direct updates (no tween)
const
setX
=
gsap
.
quickSetter
(
".cursor"
,
"x"
,
"px"
)
;
const
setY
=
gsap
.
quickSetter
(
".cursor"
,
"y"
,
"px"
)
;
window
.
addEventListener
(
"pointermove"
,
(
e
)
=>
{
setX
(
e
.
clientX
)
;
setY
(
e
.
clientY
)
;
}
)
;
5.2 Avoid layout thrash
// ❌ BAD: Mixed reads and writes
elements
.
forEach
(
el
=>
{
const
rect
=
el
.
getBoundingClientRect
(
)
;
// read
gsap
.
set
(
el
,
{
x
:
rect
.
width
}
)
;
// write
}
)
;
// ✅ GOOD: Batch reads, then writes
const
rects
=
elements
.
map
(
el
=>
el
.
getBoundingClientRect
(
)
)
;
// all reads
elements
.
forEach
(
(
el
,
i
)
=>
gsap
.
set
(
el
,
{
x
:
rects
[
i
]
.
width
}
)
)
;
// all writes
5.3 ScrollTrigger scale rules
Reduce trigger count; batch reveals where possible
Use
invalidateOnRefresh
when layout-driven values are used
Use
ScrollTrigger.batch()
for lists of similar elements
6) ScrollTrigger Mastery (Core Scroll Animations)
ScrollTrigger enables scroll-based triggering, scrubbing, pinning, snapping, etc.
6.1 Minimal patterns
// Pattern A: Inline scrollTrigger
gsap
.
to
(
".box"
,
{
x
:
500
,
scrollTrigger
:
{
trigger
:
".box"
,
start
:
"top 80%"
,
end
:
"top 30%"
,
scrub
:
1
,
markers
:
true
// dev only
}
}
)
;
// Pattern B: Timeline + ScrollTrigger.create
const
tl
=
gsap
.
timeline
(
)
;
tl
.
from
(
".item"
,
{
y
:
50
,
autoAlpha
:
0
,
stagger
:
0.1
}
)
;
ScrollTrigger
.
create
(
{
animation
:
tl
,
trigger
:
".section"
,
start
:
"top 70%"
,
toggleActions
:
"play none none reverse"
}
)
;
6.2 Pinned storytelling (timeline + scrub)
const
tl
=
gsap
.
timeline
(
)
;
tl
.
from
(
".panel1"
,
{
autoAlpha
:
0
,
y
:
20
}
)
.
to
(
".panel1"
,
{
autoAlpha
:
0
}
)
.
from
(
".panel2"
,
{
autoAlpha
:
0
,
y
:
20
}
,
"<"
)
;
ScrollTrigger
.
create
(
{
animation
:
tl
,
trigger
:
".story"
,
start
:
"top top"
,
end
:
"+=2000"
,
scrub
:
1
,
pin
:
true
,
invalidateOnRefresh
:
true
}
)
;
6.3 Batching for lists
ScrollTrigger
.
batch
(
".card"
,
{
onEnter
:
(
elements
)
=>
gsap
.
from
(
elements
,
{
y
:
30
,
autoAlpha
:
0
,
stagger
:
0.1
}
)
,
start
:
"top 85%"
}
)
;
6.4 Horizontal scroll sections
const
sections
=
gsap
.
utils
.
toArray
(
".panel"
)
;
gsap
.
to
(
sections
,
{
xPercent
:
-
100
*
(
sections
.
length
-
1
)
,
ease
:
"none"
,
scrollTrigger
:
{
trigger
:
".horizontal-container"
,
pin
:
true
,
scrub
:
1
,
end
:
(
)
=>
"+="
+
document
.
querySelector
(
".horizontal-container"
)
.
offsetWidth
}
}
)
;
6.5 Responsive + reduced motion (required)
gsap
.
matchMedia
(
)
.
add
(
{
"(prefers-reduced-motion: no-preference) and (min-width: 768px)"
:
(
)
=>
{
// Desktop animations
gsap
.
from
(
".hero"
,
{
y
:
50
,
autoAlpha
:
0
,
scrollTrigger
:
{
trigger
:
".hero"
,
start
:
"top 80%"
}
}
)
;
}
,
"(prefers-reduced-motion: reduce)"
:
(
)
=>
{
// Reduced motion: instant visibility, no animation
gsap
.
set
(
".hero"
,
{
autoAlpha
:
1
}
)
;
}
}
)
;
7) ScrollTo (Programmatic Scroll)
Use ScrollTo for smooth navigation to anchors/sections.
gsap
.
registerPlugin
(
ScrollToPlugin
)
;
// Scroll to element
gsap
.
to
(
window
,
{
duration
:
1
,
scrollTo
:
"#pricing"
,
ease
:
"power2.out"
}
)
;
// Scroll to position
gsap
.
to
(
window
,
{
duration
:
1
,
scrollTo
:
{
y
:
500
,
autoKill
:
true
}
}
)
;
// With offset
gsap
.
to
(
window
,
{
scrollTo
:
{
y
:
"#section"
,
offsetY
:
80
}
}
)
;
8) ScrollSmoother (Smooth Scroll + Effects)
ScrollSmoother creates native-scroll-based smoothing and parallax effects.
gsap
.
registerPlugin
(
ScrollTrigger
,
ScrollSmoother
)
;
// Required HTML structure:
//
//
...content...
//