我覺得 Scroll Effect (滾動效果) 是 Framer 動態效果中最核心的功能！滾動效果有四種：Scroll Animation、Scroll Speed、Scroll Transform、Scroll Variant。只要搞懂這四種，就可以組合出超多互動變化！在別人網站上看到的滾動效果，大多都是這幾種模式搭配出來的。
這篇會把四種動畫設定一次講完，範圍只到滾動觸發，而 Hover、Press、Loop、Drag 和頁面轉場會另外再寫一篇～
滾動效果在哪裡設定？
選取任何一個物件後，到右側面板的 Effects 區塊，右邊有個 ＋ 號，點下去就可以看到一排效果。而今天這篇的重點是「Scroll」，移上去還有子選單，可以看到四種設定：
Scroll Animation：定點播完動畫
Scroll Speed：視差滾動
Scroll Transform：動畫跟著滾輪走
Scroll Variant：滾動變換樣子
動起來之前： 先搞懂 Trigger 觸發條件
不管你用四種效果的哪一種，首先要決定的都是觸發條件 Trigger：也就是動畫該怎麼觸發、什麼時候發生。選擇一個動畫效果後，第一個選項 Trigger 的下拉選單裡有四個選項：
觸發條件 | 運作邏輯 | 最適合的使用場景 |
|---|---|---|
On Appear | 頁面一載入完成就立刻播放（與滾動無關） | 網頁 Hero Section、主標題、第一顆按鈕 |
On Scroll | 只要使用者進行滾動動作就觸發 | 導覽列（Navbar）的隱藏與出現 |
Layer in View | 該「物件本身」捲入螢幕畫面時觸發 | 段落文字淡入、卡片一張張浮現 |
Section in View | 整個「特定區塊」進畫面時，內部物件一起觸發 | 多欄位排版、一整排卡片同時登場 |
On Appear
這個觸發條件是使用者「一打開頁面」就會開始播放動畫，其實等於跟滾動沒有任何關聯！所以只要點下去，面板的標題會從 Scroll Animation 變成 Appear Effect。它只在網頁載入時播一次，沒有離場、不會重播。
這適合用在標題、主視覺、第一顆按鈕；不適合放在滾動後才會看到的畫面（會變成動畫在使用者還沒滑到之前就播完了，捲下來只會看到靜止的畫面，等於白設定了）。
（可以看到上方導覽列，往上滾動時會重新顯示）
On Scroll
只要滾動就觸發，最適合用在一個地方：導覽列。往下滾的時候把導覽列收起來，往上滾的時候再讓導航列顯示。
⚠️ 注意一定要搭配 Replay。光開 On Scroll，動畫只會朝一個方向演一次，導覽列收起來就再也不出現。把 Replay 打開，動畫才會在每次通過觸發點時重播。
Layer in View
設定任一物件本身滾進畫面的時候就觸發動畫，非常適合用來製作一般內容的進場動畫，營造出隨著滾動順暢出現的節奏感，例如：段落淡入出現、卡片一張張出現。
可以透過面板中的 Start 屬來精準微調觸發時機（例如：物件的頂端、中間還是底部接觸到視窗底部時開始）。
（擷取自官方教學影片：Triggering animations on scroll in Framer (Animation Lesson 7)）
Section in View
可以設定某個區塊作為觸發點。而這個區塊範圍必須先自己設定。做法是先用一個 layout（Stack 或 Frame）把要一起動的物件包起來，選取這個容器，到右側面板下面的「Scroll Section」設定。幫這個 Section 命名完成後，圖層會出現一個 # 符號，代表這塊範圍已經註冊成功。
Section in View 同樣可以設定觸發時機：在 Viewport 選上緣代表 「Section 的頂部」碰到畫面上緣才觸發（比較晚）；選下緣則是 「Section 的頂部」一冒出畫面底部就開始（比較早）。中間就是 「Section 的頂部」到達視窗中心時觸發。
（擷取自官方教學影片：Triggering animations on scroll in Framer (Animation Lesson 7)）
Section 裡面的物件除了跟著整組一起觸發，還可以各自再加自己的 effect，彈性比 Layer 大很多。想搞懂怎麼用 Stack 把物件包成一個容器，可以看認識 Framer Stack：響應式排版的核心工具；容器的尺寸行為則可以看搞懂 Fill 與 Fit Content。
搞懂怎麼設定觸發條件，接下來就可以正式進入動畫設定了！
Scroll Animation：定點播完動畫
這是最基礎的動畫設定，觸發後會直接完整播放一段設定好的動畫（例如淡入、向上浮起）。設定面板的欄位有這幾個：
Trigger：選擇觸發方式，就是上一段那四個
Start：判定「進畫面」的對齊觸發點，見上一節
Replay：打開之後，每次通過觸發點都會重播一次，來回都算
Preset：預設動畫效果（預設為 Fade In）
Enter / Exit：分別控制「進場」與「離場」動畫。中間有鎖頭圖示，解鎖後可單獨設定離場動作。點進 Effect，就是實際調參數的地方，可以調整透明度、位移、縮放、旋轉等變化。
Scroll Transform：動畫跟著滾輪走
不同於 Scroll Animation 是「滾到定點就一次播完」，Scroll Transform 是把「動畫進度綁在滾動位置上」。使用者滾多少，它就動多少。
什麼時候該用 Transform 呢？當你希望使用者感覺自己在操控畫面的時候。典型的例子是產品展示頁：隨著滑鼠滾輪往下滾，手機產品圖會慢慢旋轉放大並轉正。只需要設定好起點 (From) 與 終點 (To)，並微調 Transition 動態曲線即可。
Scroll Transform 的效果，會跟者滾輪出現
對比看看上一個 Scroll Animation 的效果，會是直接播完動畫
（感謝 Framer 交流基地讀書會的 AK 分享範例素材 ✨）
Scroll Speed：視差滾動（Parallax）
這個效果能做出有類似前後景的視差效果，原理是讓畫面上不同的元素以「不同的速度」隨著滾輪移動。就像現實世界裡，你在車上看窗外，遠山移動得慢、路邊的電線桿移動得快，大腦就能自動判讀出遠近，產生立體深度感。
設定方式就是給元素一個速度值。遠景數值小（動得慢），前景數值大（動得快），可以這樣搭配：
圖層 | Speed | 效果 |
|---|---|---|
前景層 | 110%～150% | 滾得比頁面快，感覺離眼睛最近 |
主體層 | 100% | 正常速度，當作基準 |
背景層 | 40%～90% | 滾得比頁面慢，退到遠處 |
（素材源自官方教學影片：Creating Parallax with Scroll Speed in Framer (Animation Lesson 9)）
要注意視差很容易做過頭，速度差太大容易讓人產生暈眩感。建議從微小的速度差（如 90% 與 105%）開始調整，感覺到「微微的空間感」就剛好。而做視差常常需要把元素疊在一起，這時候會用到絕對定位。可以參考一次搞懂 Absolute 與 Relative 定位。
Scroll Variant：滾動變換樣子
這是 Framer 非常強大的進階功能，限制必須在「元件 (Component)」上才能使用。Variant 代表元件的不同狀態。透過 Scroll Variant，你可以設定「滾動到特定區塊時，元件自動切換成另一個狀態」，也就是可以設定的變化就更多了，不像是前面只能設定透明度、位移、縮放、旋轉等變化。
最常見的應用是產品功能介紹：左邊放一支手機設成 Sticky，右邊每段說明文字各給 100vh 並加上 Section Name，滾動的時候右邊文字往上走，左邊手機畫面跟著換。
（素材源自官方教學影片：Animating between variants on scroll in Framer (Animation Lesson 10)）
官方也有示範一個玩法是用 Scroll Variant 控制影片播放：把影片包成 Component，建立「暫停」和「播放」兩個 variant，再指定滾到某個區塊時切成播放。整個流程不用寫任何程式碼。有興趣可以看看 Framer Academy 的「Triggering video playback on scroll」。
結語
搞懂這四種滾動效果與觸發邏輯後，你會發現原本只能靠想像的動態與微互動，現在都能嘗試在 Framer 中實現～這些看似複雜的網頁效果，背後其實都是極具規律的邏輯組合，而在 Framer 中可以很簡單的設定好！
也提醒大家在設計時保持克制，不必一口氣把所有動畫疊加上去，而是適當的讓動態成為輔助閱讀的亮點。下一篇我們會繼續解鎖 Hover、Press、Loop 和 Drag 等滑鼠互動與轉場設定，陪你一起把網站質感再提升一個檔次～