iotron 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