gsap-timeline

gsap-timeline 技能概覽

gsap-timeline 的用途

gsap-timeline 技能可幫你建立並理解 gsap.timeline() 的序列：依序排列的動畫步驟、重疊、標籤，以及巢狀播放。當真正的問題在於「協調」而不是單一 tween 時，就該使用 gsap-timeline 技能——例如編排進場狀態、同步多個 UI 元素，或把動態設計轉成可重複執行的序列。

最適合的使用情境

這很適合正在做 UI 動態、產品微互動、登陸頁揭露動畫、上手流程，或任何需要精準時序的動畫的開發者與設計師。當你要把視覺敘事轉成具體的 timeline 結構時，gsap-timeline for UI Design 特別有用。

這個技能有什麼不同

它的核心價值不在「怎麼做動畫」，而在於「動畫步驟該怎麼擺」。gsap-timeline 指南聚焦在預設排序、position 參數，以及播放行為，讓你避開脆弱的時間假設。如果你需要的是 scroll 控制、單一屬性的 easing，或 React 專屬串接，通常會有其他 GSAP 技能更適合作為起點。

如何使用 gsap-timeline 技能

安裝並啟用

先依照目錄的安裝流程完成 gsap-timeline install，接著在起草程式碼或提示詞前先把技能掛到任務上。典型的安裝指令是：
npx skills add greensock/gsap-skills --skill gsap-timeline
之後，請先閱讀技能內容，讓模型在開始撰寫動畫程式碼前，就先掌握正確的排序規則。

先讀對的原始檔

從 skills/gsap-timeline 裡的 SKILL.md 開始讀。在這個 repository 中，這是唯一的來源檔，所以最快的方式就是完整讀完，而不是去找這裡根本不存在的支援資料夾。請特別注意：

• 這個技能什麼情況下該用
• timeline 建立時的預設行為
• position 參數的各種形式
• 關於 timeline 播放與巢狀結構的說明

把粗略需求轉成可用提示詞

當你的提示詞包含動畫目標、受影響的元素、希望的順序，以及任何重疊規則時，這個技能的效果最好。可以比較這兩種寫法：

• 弱：Make this animate nicely with GSAP.
• 強：Use gsap-timeline to reveal the hero heading, then stagger the cards, then fade the CTA in 0.2s before the cards finish. Keep the sequence readable and label the main beats.

在 gsap-timeline 的使用上，請加入像是「overlap」、「after」、「at the same time」，或某個命名 label 這類時序意圖。這樣模型才會選對 position 語法，而不是憑猜測。

避免壞 timeline 的工作流程

先把動態拆成 beats，再把每個 beat 對應到 timeline 的一步。如果動畫有分支、重複片段，或可重用的進場／退場狀態，請提早要求使用 labels 與 nested timelines。如果你是在做 UI 動態，還要明確說明動畫是否必須可反轉、可中斷，或要跟元件生命週期綁定，因為這會直接影響 timeline 的結構。

gsap-timeline 技能 FAQ

gsap-timeline 只適合進階 GSAP 使用者嗎？

不。只要你能清楚描述一個序列，它就很適合新手。主要學習門檻在於理解 timeline 預設會直接接續，以及 position 參數負責控制位置。只要你能說清楚 UI 變化的先後順序，這個技能通常就足以產出可用的初稿。

什麼情況下不該使用它？

如果你只需要單一 tween、基本 easing，或 scroll-triggered orchestration，就不要用 gsap-timeline。那種情況下，gsap-core、gsap-scrolltrigger 或 gsap-react 可能更合適。當真正的難題是時序關係時，gsap-timeline 技能才最強。

這比一般提示詞好在哪裡？

一般提示詞常會產出順序大致正確、但位置邏輯很弱的 timeline。gsap-timeline 指南提供模型需要的詞彙——預設 append 行為、相對位移、labels，以及起點／終點錨點——因此輸出更可預期，也更容易維護。

它對 UI 設計流程有幫助嗎？

有，尤其是設計交付用文字而不是程式碼描述動態時。對 gsap-timeline for UI Design 來說，這個技能能幫你把「標題先出現、卡片依序帶入、按鈕最後落定」轉成具體的動畫計畫，用明確時序取代模糊排序。

如何改進 gsap-timeline 技能

提供時序意圖，不只說結果

最大的品質提升來自於明確指出哪裡可以重疊。例如，與其說「讓它順一點」，不如說「讓副標在標題開始後 0.15s 出現」。如果序列需要 label，也請直接在提示詞中說明，這樣模型才能穩定地錨定後續步驟。

補充會改變結構的動態背景

請說明這個 timeline 是用在頁面載入、hover 互動、modal 開關、onboarding，還是重複循環。一次性的進場動畫可以很簡單；可反轉的互動可能需要更乾淨的狀態管理，並減少隱含假設。這正是 gsap-timeline 技能最有價值的地方：它把意圖轉成穩定的序列，而不只是動畫程式碼。

留意常見失誤

常見錯誤包括過度使用絕對時間、忘記 tween 預設會接續、以及把彼此無關的動畫需求混進同一條 timeline。若第一次輸出看起來不對，請要求把同一個序列改寫成使用 labels、減少硬編碼秒數，或明確標出重疊點。這通常比要求「更好的動畫」更能提升清晰度。

用具體修改方式反覆調整

初稿完成後，請透過命名元素、加入偏好的節奏，以及指定任何限制條件來細化提示詞，例如 reduced motion、響應式，或可重用性。好的後續提示詞包括：

• Keep the same gsap-timeline structure, but make the middle section overlap by 0.25s.
• Rewrite this with labels so I can maintain it later.
• Adapt this for a reusable component and keep the timeline easy to reverse.