Warning: Undefined array key "HTTP_ACCEPT_LANGUAGE" in /volume1/web/param.php on line 21 Warning: Uninitialized string offset 0 in /volume1/web/param.php on line 32 Warning: Uninitialized string offset 1 in /volume1/web/param.php on line 32 SlimWeb

首頁 / 精選專題 / GSAP 的 ScrollTrigger

GSAP 的 ScrollTrigger

以滑動事件為導向的動畫

GSAP 中一個非常重要的動畫模式～ScrollTrigger～以滑鼠滾輪或是手指滑動事件作為動畫的依據，以下簡稱滾輪動畫，滾輪動畫當然就是發生在視窗進行滾動時，由事件來觸發動畫的播放，滾輪動畫可分為兩種類型


滾輪當作動畫的觸發器

只負責播放動畫，不干涉其運作

如果你還不知道如何用 GSAP 做一段動畫，請參考之前的教學，這裡我們還是沿用小蜘蛛人做範例，同樣用蜘蛛人當作觸發器，當蜘蛛人的位置來到視窗的中央時，就播放動畫。 



gsap.to('#spider1', {
        x: '200%', //往右移動100%
        duration: 0.5, //動畫時間0.5秒
        scrollTrigger: { //滾輪觸發器
            trigger: '#spider1', //觸發的元素
            start: 'top center', //觸發時機-當蜘蛛人的top位置與視窗center位置交會時
            end: 'bottom center', //觸發結束時機-當蜘蛛人的bottom位置與視窗center位置交會時
            toggleActions: 'play reverse play reverse', //定義滾輪往返元素時的動作
            markers: true //顯示元素與視窗的輔助標記
        }
    })

toggleAction 總共有4個參數，分別代表

  1. 當視窗往下滾動，蜘蛛人 top 與視窗 center 交會時 - play(播放)
  2. 當視窗往下滾動，蜘蛛人的 bottom 與視窗 center 交會時 - reverse(倒放)
  3. 當視窗往上滾動，蜘蛛人的 top 與視窗 center 交會時 - play(播放)
  4. 當視窗往上移動，蜘蛛人的 bottom 與視窗的 center 交會時 - reverse(倒放)
可以用的參數有 play, pause, resume, reverse, reset, restart, complete, none
這類型動畫應用範圍很廣泛，舉例來說你希望用戶滑動到某個商品時，就跑出一個輔助說明的小視窗等等～


由滾輪來控制動畫進度

非常流行的 Scroll 應用

這種模式的動畫直接由滾輪來控制，體驗性非常好 



gsap.to('#spider2', {
        x: '200%', //往右移動100%
        rotate: 360,//旋轉360度
        scrollTrigger: { //滾輪觸發器
            trigger: '#spider2', //觸發的元素
            start: 'top center', //觸發時機-當蜘蛛人的top位置與視窗center位置交會時
            end: 'bottom center', //觸發結束時機-當蜘蛛人的bottom位置與視窗center位置交會時
            scrub: true, //定義由滾輪來控制動畫進度
            markers: true //顯示元素與視窗的輔助標記
        }
    })
 
其實非常簡單～加上一個 scrub 參數並設定為 true 就行～
這只是一段簡單的範例，ScrollTrigger 可以做非常複雜的效果，更多範例可以參考官網的文件。


搭配 transform 做出 3D 效果

使用 SlimWeb TinyMCE 內的調整元素，快速得到動畫參數

透過調整元素功能，我們能迅速設定元素的各種 transform 參數，例如翻轉角度、中心點、透視度等等，以下讓我們看一個較複雜的範例

Card image cap


My adventure

Photography

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem perspiciatis voluptatum a, quo nobis, non commodi quia repellendus sequi nulla voluptatem dicta reprehenderit, placeat laborum ut beatae ullam suscipit veniam.




gsap.from('#c_1739618909084', {
        rotateY: 120, //初始的Y軸旋轉120度
        scrollTrigger: {
            trigger: '#c_1739618909084', //使用卡片本身當觸發器
            start: 'top bottom', //卡片的 top 與視窗的 bottom 交會時
            end: 'top top', //卡片的 top 到達視窗的 top
            scrub: true, //使用滾輪控制動畫
            markers: true //顯示元素與視窗的輔助標記
        }
    })

這段動畫分為兩個部分，首先將整張卡片從左側沿著 Y 軸翻轉進到視窗內，我們可以看到卡片再翻轉時，其軸心是沿著自己的最左側，所以我們必須先設定好卡片的軸心點，在 TinyMCE 內非常簡單，插入卡片後，在元素使用表內找到卡片並點選調整元素，將 X 中心點往左拉到 0%



當然你也可以使用 CSS 或是 JS 來設定元素的中心點

#c_1739618909084 {
      transform-origin: 0% 50%;
}
$('#c_1739618909084').css('transformOrigin', '0% 50%');

//或是使用 GSAP 的 set 方法

gsap.set('#c_1739618909084', {
       transformOrigin: '0% 50%'
    });

當卡片的 top 到達視窗的 top 時，第一段動畫就算是完成了，接著我們要暫停視窗的滾動，並讓文字隨著滾輪滑動出現，首先將文字部分 id 命名為 c_body

//先將#c_body元素隱藏起來
    gsap.set('#c_body', {
        visibility: 'hidden'
    });

    gsap.from('#c_body', {
        y: '-110%', //初始位置為上方-110%
        scrollTrigger: {
            trigger: '#c_1739618909084', //設定觸發元素是卡片上的圖片
            start: 'top top', //當圖片 top 與視窗 top 交會時觸發
            scrub: true, //由滾輪來控制動畫
            pin: true, //暫停視窗滾動直到動畫完成
            //markers: true,
            onEnter: function() {
                //當觸發時，將#_body元素設定為可見
                $('#c_body').css('visibility', 'visible');
            },
            onLeaveBack: function() {
                //當視窗往上滾動時將#_body元素設定為不可見
                $('#c_body').css('visibility', 'hidden');
            }
        }
    })

為什麼要將文字先隱藏起來呢，因為在手機上，文字的高度超過了圖片，如果不先隱藏起來，就會像下面這樣～穿幫了...😂


這裡我們仍然使用 c_1739618909084 當作觸發器，增加一個 onEnter 事件，就是當圖片碰到視窗的 top 時，就將 c_body 設置為可見（因為這時候他已經在視窗外），然後用 from 的方法讓他回到圖片的下方，pin 設置為 true 就可以暫停視窗的滾動，直到 c_body 完成動畫後視窗才能繼續滾動，可以做出好看的延遲效果～
最後我們增加一個 onLeaveBack 事件，視窗回滾的時候將 c_body 隱藏起來，就大功告成了～


SlimWeb Developer Eric
一個在五濁亂世中
    不願靠話術生存的工程師
Eric Chen
最後更新 2025-02-15 22:00:59發表日期 2025-02-15 07:28:00

延伸閱讀...

TinyMCE 編輯器介紹ChatGPT的資料庫應用為什麼不用WordPress來架設網站？GSAP入門

相關商品

Related Products
229

$29,999 $29,999

SlimWeb 全功能電商系統
117

$9,999 $19,999

SlimGPT/應用型人工智能

  • SlimWeb 全功能電商系統

    SlimWeb 全功能電商系統

    $29,999 $29,999

  • SlimGPT/應用型人工智能

    SlimGPT/應用型人工智能

    $9,999 $19,999

RWD網站

人工智能

前端設計

RWD網站

美術設計