# GSAP 试跑：让动效服从五套不同的信息结构

这轮 Friends 创作采用原生 HTML、CSS、JavaScript，围绕五个不同主题分别设计网站和独立登录页。GSAP 官方模块提供基础动画、时间轴、滚动绑定和性能方法；没有为了动画迁移到 React、Vue 或 Svelte。

## SONORA：对象如何被读懂

音响界面以奶油留白和钴蓝产品轮廓建立焦点。长页先给出完整对象，再让组件分离、停驻、重组，随后转入聆听空间与阅读内容。ScrollTrigger 只固定有限的舞台区间，正文和导航保持原生滚动。时间轴用标签描述阶段，反向滚动回到对应装配状态；登录页将同一对象放到分层微缩房间，使用受限指针视差。

## VELUM：叠放要服务阅读顺序

文学阅读页用衬线目录、摘录和笔记组织页面。章节逐层叠放强调先后关系，避免所有板块都做相同淡入。窄屏、短视口和减少动态效果恢复普通文档流，保证长文和焦点能读到。登录采用阅读角色的视线响应，在密码输入聚焦时回避输入区域。

## TIDEGLASS：角色环绕一个真实的叙事中心

潮池主题使用原创海洋剖面和物种卡片，围绕明确中心有限旋转，将潮汐变化与观察顺序连接起来。轨道与角色朝向分开控制，避免把自转冒充环绕。物种筛选是可完成的本地操作；静态场景不依赖 WebGL 或图片生成服务。

## SEEDWELL：景深来自层次

植物照护页的前、中、后景使用不同位移幅度。指针事件只更新 `quickTo` 的目标值，不逐事件生成动画。条件选择更新当前照护建议，长页继续围绕同一植物语汇安排标本、环境、行动与说明。触屏和减少动态效果直接展示完整窗台，保留自然滑动。

## SWITCHBOARD：空间重组与真实文件输出

空间编排页使用大网格平面、橙色动线和清楚的配置说明。有限固定舞台把层次与部件重新排布；展览、论坛、市集等本地选择切换平面及说明，下载相应真实 SVG。动画只解释布局，不能被当成建筑规范、消防验收或场地服务已经接通的证明。

## 生命周期与失败恢复

页面增强统一由自己的 matchMedia 与监听负责。媒体查询不再匹配时 GSAP 自动 revert；页面离开时撤销自身动画和监听，bfcache 返回后恢复本页增强。后台暂停本页仍在活动的有限动画，不重复播放已完成的入场；不使用全局 `killAll` 破坏其他组件。

静态 HTML 先包含全部关键内容，动画脚本只做增强。图标以独立 SVG 交付，Morphicons 沿用固定版本并显式尊重系统减少动态效果，用于原生 details 的真实展开状态。原生 disclosure 和静态端点在模块失败时仍成立。

登录没有真实认证服务，字段格式合格后如实报告暂不可用并清空密码；无脚本或认证处理脚本失败时字段禁用，不发送或保存凭据。这些验证只能证明前端行为，不能证明认证接通。

## 依赖、素材和证据边界

GSAP 3.15.0 从官方 npm 包获取，核对 SHA-512 后只保留 core、ScrollTrigger、版权头和许可说明；运行时同源加载，沿用站点 CSP。原创页面图形和二十枚 UI 图标独立绘制，品牌标识与导出变体另计。使用系统字体，不复制个人技能正文或私人资料。

桌面、平板、手机、真实状态、反向滚动、脚本失败和减少动态效果的实际结果见本轮项目 QA。没有性能采样就不宣称 60fps、Lighthouse 分数或低端设备表现。每套页面需要分别通过验证，使用库本身不是品质证据。

参考：[GSAP matchMedia](https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/)、[ScrollTrigger](https://gsap.com/docs/v3/Plugins/ScrollTrigger/)、[GSAP 标准许可](https://gsap.com/standard-license)。