用 GSAP 與 SplitText 做 Hero 進場動畫
本機 Hero 頁面，包含協調的 GSAP 進場動畫與 reduced-motion 後備。
第一個成果
重新整理頁面時，瀏覽器播放乾淨的 GSAP 進場動畫。
適合對象
學習 GSAP 的網頁設計師
需要
Claude Code, 瀏覽器, 可選 Hero 文案
範例成果
重新整理頁面時，瀏覽器播放乾淨的 GSAP 進場動畫。
本機 Hero 頁面，包含協調的 GSAP 進場動畫與 reduced-motion 後備。
GSAP
Timeline
SplitText
Reduced motion
載入時進場
標題逐字浮現。
單一 GSAP timeline 在約 1.4 秒內淡入小標題、SplitText 逐字浮現、副標上浮、按鈕放大進場，並描出視覺重點。
錯落
Power3 緩動
matchMedia
01
逐字浮現
SplitText 把標題拆成字元，每個字元帶著短暫錯落上升。
02
安靜後備
啟用 reduced motion 時直接顯示最終 Hero，不播放動畫。