SuperAPI AI 工具集

gsap-showcase

设计与创作

查看项目

更新于 10-15 22:38

技能介绍

GSAP Showcase 是面向高级动画的组合参考技能,侧重完整作品的编排,而非单个插件 API;插件细节应调用 gsap-core、gsap-plugins、gsap-timeline、gsap-scrolltrigger 等官方技能。

用途:在两层技能体系中充当“品味层”。第一层为单项技术技能(如 gsap-scroll、gsap-text、gsap-cursor、gsap-vfx)提供可复制的局部模式;第二层即本技能,提供把多个插件组合成精致生产级动画的完整作品。

主要能力与用法:先查找与需求相近的 showcase 组合,研究其插件搭配、时间轴、分层与响应式处理,再用各技术技能实现具体组件。展示分为 hero-sections(首屏英雄区)、scroll-experiences(滚动驱动场景,如 3D 轮播、固定序列)、interactive-scenes(多插件交互组合)、page-transitions(整页转场,规划中)、loading-sequences(高级加载/揭示,规划中)。

每个参考文件位于 references/<类别>/,包含来源与作者、所需插件、高级之处、编排说明、完整 HTML+CSS+JS 代码及适配说明。已收录示例包括 Responsive SplitText Animator、Responsive matchMedia、Scrubbed Vertical Rolodex、Free For All(旗舰)、Complex SVG Timeline、Scrubbed Bento Gallery、Card Stack、Curve Swipe、Image Sequence、Infinite Card Slider。涉及插件有 ScrollTrigger、SplitText、Flip、MorphSVG、Physics2D、MotionPath、DrawSVG、CustomBounce、CustomWiggle、Draggable、GSDevTools 等。

适用场景:需要把多个 GSAP 插件组合成完整、精致、可上线的交互动效时使用。限制:本技能不覆盖单个插件 API;页面转场与加载序列类别仅规划中,暂未提供对应示例。