AI Skills
gsap

gsap

熱門

GSAP 動畫參考，適用於 HyperFrames。涵蓋 gsap.to()、from()、fromTo()、緩動、間隔、預設值、時間軸（gsap.timeline()、位置參數、標籤、巢狀、播放控制）以及效能（變形、will-change、quickTo）。在 HyperFrames 組合中撰寫 GSAP 動畫時使用。

3.8萬星標
3555分支
更新於 2026/7/26
獲取技能源代碼

相關技能

homelab-network-readiness24萬draw-io-diagram-generator3.7萬seo-page1.2萬
SKILL.md
readonlyread-only
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; // key 必須等於組合根元素的 data-composition-id
</script>