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

Common Layout Combinations

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