Gsap animate

Skill iotron/gsap-cookbook/skills/gsap-animate

Production recipes for premium GSAP animations — scroll, text, SVG, cursor, canvas, and visual effects. Claude Code plugin.

Install

npx -y skills add iotron/gsap-cookbook --skill gsap-animate

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
5 stars5 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Production recipes for core GSAP animation orchestration. Provides foundational patterns and dispatches to specialised sub-skills based on animation type. Companion to official gsap-frameworks and gsap-timeline skills (API reference). Triggers: GSAP animation, gsap.to, gsap.from, gsap.context, ctx.add, Vue GSAP, Nuxt GSAP, animation pattern, component animation, section animation, layout animation. Non-triggers: Not for initial GSAP installation/setup (use gsap-setup). Not for specific pattern implementation — dispatches to sub-skills instead. Outcome: Provides foundational animation patterns (context, cleanup, composables, autoAlpha, matchMedia) and dispatches to the correct sub-skill based on animation type.

SKILL.md

4.5 KB, as published. Nobody here has run it

GSAP Animate — Core Orchestrator

Flow: gsap-setup → gsap-animate → gsap-optimise → gsap-test

Companion: For framework lifecycle/cleanup, invoke gsap-frameworks. For timeline API, invoke gsap-timeline. This skill covers animation orchestration recipes only. Requires: greensock/gsap-skills

Sub-Skill Dispatch

Building this?	Use this sub-skill
Scroll reveals, parallax, pinned sections, stacking cards	gsap-scroll
Tilt cards, hover effects, drag interactions	gsap-interact
Text reveals (SplitText), scramble decode, kinetic type	gsap-text
SVG path drawing, morphing, circuit boards	gsap-svg
Glitch effects, marquee, counters, floating elements	gsap-vfx
Cursor followers, trails, magnetic, spotlight	gsap-cursor
Canvas particle systems, canvas rendering	gsap-canvas
Premium section or full-page composition	gsap-showcase (reference) + technique skills

Common Layout Combinations

Layout	Sub-skills to combine
Hero section	gsap-text + gsap-scroll + gsap-vfx
Services grid	gsap-scroll + gsap-interact
Circuit board	gsap-svg + gsap-interact
Cyber/terminal page	gsap-text + gsap-vfx + gsap-svg
Stats section	gsap-vfx + gsap-scroll
Premium hero	gsap-showcase + gsap-text + gsap-scroll + gsap-cursor
Interactive canvas scene	gsap-showcase + gsap-canvas + gsap-scroll

1. Context & Cleanup (Foundation)

Rule: Every tween must live inside a gsap.context().

let ctx
onMounted(() => {
  ctx = gsap.context((self) => {
    gsap.to('.item', { y: 0, scrollTrigger: { ... } })
    gsap.set(el, { transformPerspective: 900 })

    self.add('onHover', (el, x, y) => {
      gsap.to(el, { rotationX: x, rotationY: y, overwrite: 'auto' })
    })
  }, scopeRef.value)
})
onUnmounted(() => ctx?.revert())

ctx.revert() kills all tweens + ScrollTriggers + restores inline styles. Does NOT remove DOM event listeners.

2. Composable Coexistence

When useReveal() coexists with interactive animations, create separate contexts:

const { init, scroll } = useReveal(sectionRef)
let tiltCtx
onMounted(() => {
  init(() => scroll())
  tiltCtx = gsap.context((self) => {
    self.add('applyTilt', (shell, xPct, yPct) => { ... })
  }, sectionRef.value)
})
onUnmounted(() => tiltCtx?.revert())

3. autoAlpha

Always use autoAlpha over opacity for reveals — see gsap-core skill for details.

4. Shared Tween Defaults

const HOVER_IN  = { duration: 0.35, ease: 'power2.out', overwrite: 'auto' }
const HOVER_OUT = { duration: 0.7,  ease: 'elastic.out(1, 0.4)' }
gsap.to(el, { scale: 1.03, force3D: true, ...HOVER_IN })

5. Accessibility via matchMedia

const mm = gsap.matchMedia()
mm.add({
  isDesktop: '(min-width: 1024px)',
  isMobile: '(max-width: 1023px)',
  reduceMotion: '(prefers-reduced-motion: reduce)',
}, (context) => {
  const { isDesktop, reduceMotion } = context.conditions
  if (reduceMotion) { gsap.set('.animate', { autoAlpha: 1 }); return }
  if (isDesktop) { gsap.to('.hero', { x: 200, scrollTrigger: { ... } }) }
})
onUnmounted(() => mm?.revert())

6. Timeline Position Parameters

See gsap-timeline skill for the full position parameter reference (+=, -=, <, absolute).

7. registerEffect — Consuming Effects

gsap.effects.reveal('.cards')
gsap.effects.reveal('.section', { duration: 1.2 })
tl.reveal('.cards', { duration: 0.4 }, '-=0.2')

References

references/vue-examples.md — Full component implementations:
- 3D tilt card with composable coexistence
- Multi-concept page with single context and 6 named handlers
- Accessible hero with matchMedia and reduced motion