AI Skills
gsap

gsap

热门

GSAP动画参考，适用于HyperFrames。涵盖gsap.to()、from()、fromTo()、缓动、交错、默认值、时间线（gsap.timeline()、位置参数、标签、嵌套、播放控制）以及性能优化（变换、will-change、quickTo）。在HyperFrames组合中编写GSAP动画时使用。

3.8万Star
3555Fork
更新于 2026/7/26
获取 Skill源代码

相关 Skills

homelab-network-readiness24万draw-io-diagram-generator3.7万seo-page1.2万
SKILL.md
readonly只读
name
gsap
description

GSAP动画参考，适用于HyperFrames。涵盖gsap.to()、from()、fromTo()、缓动、交错、默认值、时间线（gsap.timeline()、位置参数、标签、嵌套、播放控制）以及性能优化（变换、will-change、quickTo）。在HyperFrames组合中编写GSAP动画时使用。

GSAP

HyperFrames 契约

HyperFrames 通过其 gsap 运行时适配器控制 GSAP。同步创建一个暂停的时间线，使用确切的 data-composition-id 将其注册到 window.__timelines 上，然后让 HyperFrames 控制其进度。

<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<script>
  window.__timelines = window.__timelines || {};
  const tl = gsap.timeline({ paused: true });

  tl.from(".title", { y: 48, opacity: 0, duration: 0.6, ease: "power3.out" }, 0);
  tl.to(".accent", { scaleX: 1, duration: 0.5, ease: "power2.out" }, 0.25);

  window.__timelines["main"] = tl; // 键必须等于组合根元素上的 data-composition-id
</script>