Day06 - 用 Stagger 做會動的文字 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2025 iThome 鐵人賽

DAY 6

自我挑戰組

從 0 開始學 GSAP 馬拉松之旅系列第 6 篇

Day06 - 用 Stagger 做會動的文字

17th鐵人賽

Jae

2025-09-20 23:29:10

18 瀏覽

分享至

Stagger

在動手前有先試想了一下畫面、動畫效果（雖然都很陽春），至於配色的部分，也想趁機分享自己特愛的兩個網站：Pinterest 以及 Color Hunt。

關於 Stagger

在劍橋字典裡， stagger 被譯作「使...錯開」，在 GSAP 裏的作用是讓動畫元素依照順序、錯開執行，因此，也就可以產生如上 gif 的視覺效果。

HTML結構

<body class="body flex h-screen justify-center items-center bg-[#117f49]">
  <div class="shape w-10 h-10 text-[#ff91b9] font-bold text-5xl -mr-2">P</div>
  <div class="shape w-9 h-9 bg-[#ff91b9] rounded-full mt-2 mr-1"></div>
  <div class="shape w-10 h-10 text-[#ff91b9] font-bold text-5xl">R</div>
  <div class="shape w-10 h-10 text-[#ff91b9] font-bold text-5xl -mx-2">T</div>
  <div class="shape w-10 h-10 text-[#ff91b9] font-bold text-5xl">F</div>
  <div class="star w-9 h-9 rounded-full mt-2 -ml-2"></div>
  <div class="shape w-10 h-10 text-[#ff91b9] font-bold text-5xl">L</div>
  <div class="shape w-10 h-10 text-[#ff91b9] font-bold text-5xl -mx-2">I</div>
  <div class="shape w-9 h-9 bg-[#ff91b9] rounded-full mt-2 -ml-3"></div> 
</body>

備註：八芒星一樣是用 CSS clip path 繪製～

第一步：設定動畫初始狀態

gsap.set(".shape, .star", {
      opacity: 0,
      y: 100,
      scale: 1
    });

使用 gsap.set() 來設定初始狀態。
y: 100 是指讓初始的字母們在原本位置的下方 100px，同理，如果今天是 y: -100 就會是在原本位置的上方 100px。

GSAP 的座標系統：

y 的數值	移動方向
y: -100	↑ 上方 100px
y: -50	↑ 上方 50px
y: 0	✦ 原始位置
y: 50	↓ 下方 50px
y: 100	↓ 下方 100px

第二步：進場動畫

const tl = gsap.timeline();

    tl.to(".shape, .star", {
      opacity: 1,
      y: 0, 
      scale: 1,
      duration: 0.6,
      ease: "back.out(1.7)",
      stagger: 0.1 
    });

初始狀態是 y:100，進場是 y:0，因此字母是由下往上出場，stagger:0.1 表示讓每個元素間個 0.1 秒依序往上出現。

第三步：加入浮動效果

    tl.to(".shape, .star", {
      y: -15,
      duration: 1,
      ease: "sine.inOut",
      yoyo: true,
      repeat: -1,
      stagger: 0.1
    }, "+=0.5");

再複習一次，y:-15 也就是從原本的位置向上移動 15px。
yoyo 這個屬性效果，正如其名，是讓動畫以正向播放完後再以反向播放。
repeat 是決定動畫重複的次數，預設值為 0，可以自己填寫想要的數字，-1 則為無限循環。
+=0.5 是在時間軸（Timeline）上延遲 0.5 秒後再執行，目的是讓這個波動的效果更加明顯。

第四步：建立芒星的旋轉動畫

  const rotate = gsap.to(".star", {
      rotation: 360,
      duration: 1,
      ease: "none",
      repeat: -1,
      paused: true // 表示初始時暫停
    });

    const body = document.querySelectorAll('.body');
    
      body.forEach(body => {
      body.addEventListener('mouseenter', () => {
        rotate.play(); 
      });
      
      body.addEventListener('mouseleave', () => {
        rotate.pause(); 
      });
    });