gsap-svg

Name: gsap-svg
Author: iotron

github.com/iotron设计与 UI939 次安装31 周前更新

代码仓库

关于 gsap-svg

gsap-svg 是面向在 Vue 或 Nuxt 中使用 GSAP 制作 SVG 动画的开发者的技能，涵盖路径绘制、变形和分层效果，并说明动画属性分工与 SVG 清理。

主要功能

01使用 strokeDashoffset 绘制 SVG 路径
02DrawSVG 插件示例
03SVG 路径变形
04滚动触发动画
05错开播放的波形与脉冲环
06SVG 清理与动画指导

适用场景

01制作 SVG 路径绘制动画
02让路径随滚动变形
03编排路径和圆形的动画
04构建循环脉冲环

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/iotron/gsap-cookbook --skill gsap-svg

安装后在 Claude Code 中输入/gsap-svg确认已加载。

附带文件references/svg-patterns.md

详细介绍

GSAP SVG — Vue / Nuxt 模式

流程：gsap-setup → gsap-animate → gsap-svg → gsap-optimise → gsap-test

配套内容：如需 DrawSVG/MorphSVG API 参考，请调用 gsap-plugins。此技能仅涵盖 SVG 动画方案。需要：greensock/gsap-skills

1. SVG 路径绘制（strokeDashoffset）

手动方式

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)

使用 DrawSVG 插件（延迟加载）

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

先交错绘制路径，再绘制节点

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')

无限脉冲环

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

2. SVG 变形（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. 扇贝波浪

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. 关键注意事项

fill：transparent，而非 fill：none

none 表示“未绘制”——GSAP 无法从该值进行插值。请使用 transparent。

分别管理动画属性

并行动画时间线必须分别控制不同的属性。波浪动画控制 stroke。颜色动画控制 fill + autoAlpha。

时间线绝对定位

对于多层组合，请使用 .add(animation, timeInSeconds)，而非相对偏移。

清理 SVG DOM

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

参考资料

references/svg-patterns.md — Circuit Tree 三层动画、CTAHud 五层系统、动态变形形状叠加、带插值的平滑变形

支持 Markdown

登录后评论