
svg-scroll-draw
producthunt.com
滚动驱动SVG路径动画,轻量无依赖。
2天前制作者:Dhruvil Chauhan
关于 svg-scroll-draw
svg-scroll-draw 是一款极致轻量的 JavaScript 库,专注于实现滚动驱动的 SVG 路径动画。它仅约 3 KB(gzipped),零外部依赖,一行代码即可让 SVG 路径随页面滚动流畅绘制。
核心功能
- 滚动驱动动画:SVG 路径的绘制进度与页面滚动位置精确绑定,无需手动计算或监听滚动事件。
- 极简集成:支持原生 JavaScript 及 React、Vue、Svelte、Solid、Angular、Astro 等主流框架,无需额外封装。
- 交互式演示:提供在线 playground,安装前即可实时体验效果。
主要特性
- 零依赖:不依赖任何第三方库,体积仅 ~3 KB,加载极快。
- 框架无关:原生支持多框架,无需为每个框架编写适配器。
- 高性能:基于 CSS
stroke-dashoffset和stroke-dasharray实现,动画流畅不卡顿。 - 易于使用:仅需一行 JavaScript 代码即可激活动画。
- 开源免费:MIT 许可,可自由使用和修改。
适用场景
- 产品展示页:用路径动画引导用户浏览产品特性。
- 故事化叙事:配合滚动讲述品牌故事或教程。
- 数据可视化:动态绘制图表或地图路径。
- 创意着陆页:增加视觉冲击力,提升用户体验。
相比 GSAP DrawSVG($150/年)或 Vivus(无滚动集成),svg-scroll-draw 以更轻量、更专注的方式解决了滚动 SVG 动画需求,是追求性能和简洁开发者的理想选择。