ScrollMagic 是一隻以 Jquery 為主的 Plugin ，適用於一些 Fancy 的活動網站，簡單的由 AOS 負責、而 ScrollMagic 完成更多複雜的任務。

此篇文章因我在搜尋ScrollMagic 的中文資料時非常缺乏，甚至一直找到舊版的官方 Demo ，許多 API 皆以不同而吃了很多苦頭，所以筆記一下、希望能幫到大家！

▍ScrollMagic 可以幹嘛？

可以先從前往 ScrollMagic 的官方網站，一進去就看到一些瘋狂的動畫，或是前往下方 Made with ScrollMagic 看更多瘋狂的事情，想像由大名鼎鼎的 GSAP 完成動畫，接著放入 ScrollMagic 中，藉由滾動進度來演進動畫，或者觸發動畫！

💡 並且 ScrollMagic 也支援 SVG 播放，可以見此官方 Demo 。

▍載入文件

使用 ScrollMagic 基本離不開 GSAP （但他們是不同產品），先依序載入以下文件：

Jquery https://code.jquery.com/jquery-3.6.0.min.js
GSAP https://unpkg.co/gsap@3/dist/gsap.min.js
ScrollMagic 本人https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js
ScrollMagic Debug 工具（可有可無） https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.js
支援 ScrollMagic 的 GSAP Plugin https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.js

說明一下 Debug 工具是我認為 ScrollMagic 一樣很貼心的功能，載入 CDN 後並為舞台新增 Indicators 就可以將 Trigger 可視化

⬆️ 右方綠色的 Start 1 與藍色的 trigger 就是 Plugin 所產生的

▍開始你的第一個ScrollMagic

每一個 ScrollMagic 都需要控制器才能動作，基本動作就是：

創建一個 ScrollController 控制器
創造一個 GSAP 動畫（或者 Active Class）
創建一個 Scene 舞台
將動畫添加到舞台
將舞台添加到控制器

是個好懂的過程對吧？接下來我們實作～

$(function(){
    // 創建 Controller
    var scrollMagicController = new ScrollMagic.Controller(); // 注意網上有些 demo 使用舊語法

    // 再來一個基本的 GSAP 動畫
    var tween1 = TweenMax.to('#animation1',0.3,{
        scale: 10
    })

    // 創建一個 Scene
    var scene1 = new ScrollMagic.Scene({
        triggerELement: '#scene1', // Start 的位子
        offset: 50 // 將 Start 從 TriggerElement 頂部往下 50px
    })
        .setClassToggle(".container","scene-1-active") // 觸發 Start 後 ToggleCalss
        .setTween(tween1) // 將 Tween 放進 Scene
        .addTo(scrollMagicController) // 將這個 Scene 放進 Controller
})

可以直接從 ScrollMagic 官方 CodePen看到效果，

當 Trigger 碰到 Start 後就會觸發 Tween1 與 ToggleCalss，

且 Trgger 繼續往下，動畫不會還原。

https://codepen.io/ncerminara/pen/EajxXx

⌛️ 動畫時間怎麼計算？

當 Trigger 碰到 Start 後的動畫時間有兩種計算方式，一種是直接於 Tween 上設置 duration ，另一種是於 Scene 上設置 duration 。

1. 在 Tween 上設置 duration

剛剛的 demo 中我們就看到基本的 Tween 起手式，第二項參數即為 duration （單位秒），當 Trigger 碰到 Start 後即自動播放動畫，無論 Trigger 有無在移動。

    var tween1 = TweenMax.to('#animation1',0.3,{
        scale: 10
    })

2.在 ScrollMagic 上設置 duration

$(function(){
    var scrollMagicController = new ScrollMagic.Controller();

    // 一樣保持 Tween 秒數 
    var tween1 = TweenMax.to('#animation1',0.3,{
        scale: 10
    })

    var scene1 = new ScrollMagic.Scene({
        triggerELement: '#scene1',
        offset: 50,
        duration: 300, // 在 Scene 中加入 duration
    })
        .setClassToggle(".container","scene-1-active")
        .setTween(tween1)
        .addTo(scrollMagicController)
})

有發現嗎？動畫進度變成由 ScrollMagic 監控滾動進度來控制，無視 Tween 的 duration ，並且根據 duration 的數字新增一個 End ，Class 也跟著 End Toggle ㄧ次！這可以應用在許多活動網頁上。

🌱 結語

ScrollMagic 的應用範圍還很廣，可以多參考官方的 examples ，玩出更多方式，但要注意語法的新舊，不然就會和我一樣不斷收到錯誤的 Console (苦笑)。

希望這篇文章有幫助到你，有任何錯誤與指教都歡迎留言告訴我！

參考文章 1. Building Interactive Scrolling Websites with ScrollMagic.js

ScrollMagic入門｜像魔術讓網頁邊滾邊動