DESIGN/设计资源·MOTION
basementstudio/scrollytelling
用 GSAP 的滚动动画库，让长页面像讲故事一样顺滑Scroll animations that turn a long page into a story.
一个React库，帮开发者用组件方式轻松创建滚动驱动的动画。A React library that makes scroll-driven storytelling animations simple and composable.
怎么装：Install: yarn add @bsmnt/scrollytelling gsap
02 / 现在的位置02 / Why now
首次发现FIRST SEEN
03 OCT 202603 OCT 2026
增长GROWTH
+0.1%+0.1%
1.7k → 1.7k stars · 3 个快照1.7k → 1.7k stars · 3 snapshots
状态STATUS
长期未更新Not updated
项目有1666个star，社区关注度高，说明很多人用这个库做滚动动画。Built by basement studio for their own production sites
03 / 它能帮你做什么03 / What it helps you do
制作随滚动播放的动画片段
精确控制动画开始和结束位置
轻松实现视差滚动效果
创建用滚动进度的图片序列
在滚动到指定点时触发动作
Define scroll animations with start and end points
Compose animations across nested React components
Automatically clean up animations on unmount
Create parallax effects with a single helper
Trigger callbacks at exact scroll positions
04 / 安装04 / Install
$ Node 用户的安装方式。The install route for Node users.
两种装法选一个即可 —— 上面那条给命令行用户，下面那条给写代码的用户。Pick one of the two — the first is for command-line users, the second for people writing code.
用yarn add @bsmnt/scrollytelling gsap来安装。Install with yarn add @bsmnt/scrollytelling gsap.
05 / 限制与风险05 / Limits and risk
风险不是警告，是可信度的一部分。以下结论只基于文档静态扫描，我们不会执行项目里的任何代码。Risk here is evidence, not an alarm. These findings come from static scanning of the docs; we never execute a project’s code.
限制LIMITS
未知Unknown
静态扫描STATIC SCAN
在 README、SKILL.md 和依赖清单中没有匹配到已知风险模式。No known risk patterns matched in the README, SKILL.md or dependency list.这不等于安全that does not mean it is safe，只能说明文档里没写。 — only that the docs do not mention it.
静态扫描未发现明显风险，但不代表安全。A static scan of the documentation found no obvious risk patterns, but this does not guarantee the library is safe.
这里只做静态扫描：读 README、SKILL.md 和依赖清单，不执行代码。没有命中不代表安全。This is static scanning only: we read the README, SKILL.md and dependency list, and never execute code. No findings does not mean safe.
{
"agents": [],
"apiKey": null,
"docker": null,
"taxonomy": {
"scores": {
"design": 5,
"ai-tools": 0,
"dev-tools": 0,
"indie-web": 0,
"skill-agent": 0,
"productivity": 0
},
"primary": "design",
"secondary": "motion"
},
"localRuntime": null,
"skillMdTotal": 0,
"skillMdErrors": [],
"treeTruncated": false,
"categoryScores": {
"data": 0,
"agent": 0,
"media": 0,
"design": 1,
"browser": 0,
"devtool": 0,
"security": 0,
"marketing": 0,
"productivity": 0
},
"classification": [],
"scannedSources": [
"readme"
],
"skillMdFetched": 0
}