Run any Skill in Manus with one click

gsap-svg

Stars5

Forks0

UpdatedMarch 24, 2026 at 15:22

Production recipes for GSAP SVG animations. Companion to official gsap-plugins skill (API reference). Triggers: SVG animation, GSAP SVG, path drawing, strokeDashoffset, DrawSVG, drawSVG, SVG morph, MorphSVGPlugin, circuit tree, circuit board, CTAHud, HUD animation, pulse ring, scallop wave, SVG stagger, SVG fill, SVG stroke, SVG cleanup, feGaussianBlur, SVG glow, SVG blink, shape overlay, page transition, section transition, smooth morph, morph interpolation, dynamic morphing, SVG curtain, shape transition. Non-triggers: Not for text animation (use gsap-text), scroll reveals without SVG (use gsap-scroll), mouse interactions (use gsap-interact), or non-SVG visual effects (use gsap-vfx). Outcome: Produces SVG animations — path drawing, morphing, circuit board patterns, HUD systems, pulse rings, and scallop waves.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

iotron

iotron/gsap-cookbook

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

File Explorer

2 files

SKILL.md

readonly

name

gsap-svg

description

GSAP SVG — Vue / Nuxt Patterns

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

Companion: For DrawSVG/MorphSVG API reference, invoke gsap-plugins. This skill covers SVG animation recipes only. Requires: greensock/gsap-skills

1. SVG Path Drawing (strokeDashoffset)

Manual approach

const ctx = gsap.context(() => {
  const paths = containerRef.value.querySelectorAll('path')
  paths.forEach((path) => {
    const len = path.getTotalLength()
    gsap.set(path, { strokeDasharray: len, strokeDashoffset: len })
  })
  gsap.to(paths, {
    strokeDashoffset: 0, duration: 2, ease: 'power2.inOut',
    stagger: { each: 0.08, from: 'start' },
  })
}, containerRef.value)

With DrawSVG plugin (lazy-loaded)

await $lazyLoadDrawSVG()
gsap.from(paths, { drawSVG: '0%', duration: 2, stagger: 0.05 })
gsap.to(paths, { drawSVG: '40% 80%', duration: 1.5 }) // partial range

Staggered paths then nodes

const tl = gsap.timeline()
tl.to(paths, { strokeDashoffset: 0, duration: 1.5, ease: 'power2.inOut', stagger: { each: 0.05 } })
  .from(circles, { scale: 0, autoAlpha: 0, duration: 0.6, ease: 'back.out(2)',
    stagger: { each: 0.03, from: 'random' } }, '-=0.5')

Infinite pulse ring

gsap.fromTo(ringEl,
  { scale: 1, autoAlpha: 0.7 },
  { scale: 2.2, autoAlpha: 0, duration: 2, ease: 'power1.out', repeat: -1, force3D: true }
)

2. SVG Morphing (MorphSVGPlugin)

const pathTo = pathEl.value.dataset.pathTo
gsap.to(pathEl.value, { attr: { d: pathTo }, duration: 1.5, ease: 'power2.inOut' })

// Scroll-driven
gsap.to(pathEl.value, {
  attr: { d: pathTo }, ease: 'none',
  scrollTrigger: { trigger: sectionRef.value, start: 'top center', end: 'bottom center', scrub: 0.5 },
})

// With MorphSVGPlugin
await $lazyLoadMorphSVG()
gsap.to(pathEl.value, { morphSVG: targetPathEl.value, duration: 1.5 })

3. Scallop Wave

gsap.from(ellipses, {
  scale: 0, autoAlpha: 0, transformOrigin: 'top center',
  duration: 0.8, ease: 'back.out(3)', force3D: true,
  stagger: { each: 0.04, from: 'center' },
  scrollTrigger: { trigger: containerRef.value, start: 'top 80%', toggleActions: 'play none none reverse' },
})

4. Critical Gotchas

fill: transparent NOT fill: none

none means "unpainted" — GSAP cannot interpolate from it. Use transparent.

Separate animation concern ownership

Concurrent timelines must own different properties. Wave owns stroke. Color owns fill + autoAlpha.

Absolute timeline positioning

Use .add(animation, timeInSeconds) not relative offsets for multi-layer compositions.

SVG DOM cleanup

onUnmounted(() => {
  ctx?.revert()
  circuitWrap.value?.replaceChildren() // clear SVG DOM
})

References

references/svg-patterns.md — Circuit Tree triple-layer animation, CTAHud 5-layer system, Dynamic Morphing shape overlays, Smooth Morph with interpolation

More from this repository

same repository

gsap-animate

iotron/gsap-cookbook

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.

2026-03-245

gsap-cursor

iotron/gsap-cookbook

Production recipes for cursor and pointer-driven GSAP animations. Companion to official gsap-core and gsap-performance skills (API reference). Triggers: cursor follower, cursor effect, mouse follower, magnetic button, spotlight cursor, cursor trail, particle trail, spring cursor, elastic cursor, pointer animation, custom cursor, cursor glow, clipPath cursor, quickTo cursor, image preview hover, perspective tilt, 3D tilt cursor. Non-triggers: Not for hover/tilt card effects (use gsap-interact), not for scroll animations (use gsap-scroll), not for general mouse events without cursor effects. Outcome: Produces cursor-driven animation effects with proper cleanup, overwrite management, and performance optimization (quickTo, ticker, will-change lifecycle).

2026-03-245

gsap-interact

iotron/gsap-cookbook

Production recipes for mouse-driven interactive GSAP animations. Companion to official gsap-core and gsap-performance skills (API reference). Triggers: GSAP mouse, mousemove animation, tilt card, 3D tilt, quickTo, quickSetter, hover animation, interactive GSAP, parallax hover, drag interaction, Draggable, liveSnap, mouse-driven animation, dock effect, macOS dock, magnification, proximity scale, dock magnify. Non-triggers: Not for scroll-driven animation (use gsap-scroll), text effects (use gsap-text), SVG drawing (use gsap-svg), visual effects like glitch/marquee (use gsap-vfx), or cursor/pointer effects (use gsap-cursor). Outcome: Produces mouse-driven interactive animations — tilt cards, hover effects, and drag interactions.

2026-03-245

gsap-optimise

iotron/gsap-cookbook

Production recipes for GSAP performance optimisation. Apply after building animations (gsap-animate) to audit and improve performance. Companion to official gsap-performance skill (API reference). Triggers: GSAP performance, animation optimise, animation slow, jank, 60fps, memory leak, tween cleanup, force3D, will-change, quickTo, quickSetter, overwrite, layout thrashing, GPU compositing, animation audit, gsap optimise, animation performance review. Non-triggers: Not for building new animations (use gsap-animate and sub-skills). Not for testing (use gsap-test). Apply this skill AFTER animations are built. Outcome: Audits and improves existing GSAP animations for 60fps — GPU acceleration, high-frequency tools, anti-patterns, and a component-level performance checklist.

2026-03-245

gsap-scroll

iotron/gsap-cookbook

Production recipes for scroll-based GSAP animations. Companion to official gsap-scrolltrigger skill (API reference). Triggers: ScrollTrigger, scroll animation, scroll reveal, parallax, sticky cards, stacking cards, scrub, pin section, batch reveal, masonry reveal, scroll progress, timeline scrub, elastic type, section switching, ScrollTrigger.batch, ScrollTrigger.create, scroll refresh, scroll cleanup, GSAP scroll, Vue scroll animation, Nuxt scroll animation. Non-triggers: Not for mouse-driven interactions (use gsap-interact), text effects (use gsap-text), SVG path drawing (use gsap-svg), or visual effects (use gsap-vfx). Outcome: Produces scroll-triggered animations — reveals, batch staggers, parallax layers, pinned sections, and scrubbed timelines.

2026-03-245

gsap-test

iotron/gsap-cookbook

Production recipes for testing, debugging, and verification of GSAP animations. No API overlap — unique to this plugin. Triggers: test animation, animation cleanup test, Playwright animation, animation debug, animation markers, memory leak animation, animation screenshot, visual QA animation, animation verification, pre-launch animation check. Non-triggers: Not for building animations (use gsap-animate). Not for performance optimisation (use gsap-optimise). Use this skill for verification and QA. Outcome: Produces test infrastructure — Vitest cleanup tests, Playwright hooks, debugging patterns, and pre-launch checklists.

2026-03-245

name

gsap-svg

description

GSAP SVG — Vue / Nuxt Patterns

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

Companion: For DrawSVG/MorphSVG API reference, invoke gsap-plugins. This skill covers SVG animation recipes only. Requires: greensock/gsap-skills

1. SVG Path Drawing (strokeDashoffset)

Manual approach

const ctx = gsap.context(() => {
  const paths = containerRef.value.querySelectorAll('path')
  paths.forEach((path) => {
    const len = path.getTotalLength()
    gsap.set(path, { strokeDasharray: len, strokeDashoffset: len })
  })
  gsap.to(paths, {
    strokeDashoffset: 0, duration: 2, ease: 'power2.inOut',
    stagger: { each: 0.08, from: 'start' },
  })
}, containerRef.value)

With DrawSVG plugin (lazy-loaded)

await $lazyLoadDrawSVG()
gsap.from(paths, { drawSVG: '0%', duration: 2, stagger: 0.05 })
gsap.to(paths, { drawSVG: '40% 80%', duration: 1.5 }) // partial range

Staggered paths then nodes

const tl = gsap.timeline()
tl.to(paths, { strokeDashoffset: 0, duration: 1.5, ease: 'power2.inOut', stagger: { each: 0.05 } })
  .from(circles, { scale: 0, autoAlpha: 0, duration: 0.6, ease: 'back.out(2)',
    stagger: { each: 0.03, from: 'random' } }, '-=0.5')

Infinite pulse ring

gsap.fromTo(ringEl,
  { scale: 1, autoAlpha: 0.7 },
  { scale: 2.2, autoAlpha: 0, duration: 2, ease: 'power1.out', repeat: -1, force3D: true }
)

2. SVG Morphing (MorphSVGPlugin)

const pathTo = pathEl.value.dataset.pathTo
gsap.to(pathEl.value, { attr: { d: pathTo }, duration: 1.5, ease: 'power2.inOut' })

// Scroll-driven
gsap.to(pathEl.value, {
  attr: { d: pathTo }, ease: 'none',
  scrollTrigger: { trigger: sectionRef.value, start: 'top center', end: 'bottom center', scrub: 0.5 },
})

// With MorphSVGPlugin
await $lazyLoadMorphSVG()
gsap.to(pathEl.value, { morphSVG: targetPathEl.value, duration: 1.5 })

3. Scallop Wave

gsap.from(ellipses, {
  scale: 0, autoAlpha: 0, transformOrigin: 'top center',
  duration: 0.8, ease: 'back.out(3)', force3D: true,
  stagger: { each: 0.04, from: 'center' },
  scrollTrigger: { trigger: containerRef.value, start: 'top 80%', toggleActions: 'play none none reverse' },
})

4. Critical Gotchas

fill: transparent NOT fill: none

none means "unpainted" — GSAP cannot interpolate from it. Use transparent.

Separate animation concern ownership

Concurrent timelines must own different properties. Wave owns stroke. Color owns fill + autoAlpha.

Absolute timeline positioning

Use .add(animation, timeInSeconds) not relative offsets for multi-layer compositions.

SVG DOM cleanup

onUnmounted(() => {
  ctx?.revert()
  circuitWrap.value?.replaceChildren() // clear SVG DOM
})

References

references/svg-patterns.md — Circuit Tree triple-layer animation, CTAHud 5-layer system, Dynamic Morphing shape overlays, Smooth Morph with interpolation