GSAP3 教學- stagger 製作依序執行的動畫

分享:
標籤: GSAP javascript

要使用 GSAP 製作依序執行的動畫也很簡單,首先我們準備一些 html 都把它加上一樣的 class,當然如果是一樣的長相也可以,GSAP 的方便就是只要你希望某些東西是依序執行的,我們可以透過加上一樣的 class 來設定。

接下來設定 gsap,只要在原本的動畫加上 stagger 就好,其中設定的值將會是執行時間隔的時間。

gsap.from(".box", {
  duration: 2,
  scale: 0.5, 
  opacity: 0, 
  delay: 0.5, 
  stagger: 0.2,
  ease: "elastic",
});