切換頁面時，發現你的網站畫面是「啪」地一下瞬間變更嗎？這樣雖然功能正常，但會覺得少了點現代網頁的精緻感與流暢度…原因是少設定了頁面切換的轉場。這篇就來講講如何在 Framer 裡設定「Page Effects」 ，讓頁面切換時可以有個過渡效果。這個功能因為設定的位置有點隱密，所以常常被忽略！一起來看看吧～
Framer 裡預設的頁面轉場效果
在 Framer 裡大致有以下幾種預設的轉場效果：
轉場類型 | 視覺效果 | 適用場景 |
Crossfade（交叉淡入淡出）、Fade out & in（先淡出後淡入） | 當前頁面透明度降低，新頁面漸漸顯現 | 適合簡約、沉穩或攝影作品集網站 |
Push（推移） | 新頁面進入時，順勢將舊頁面推走 | 塑造強烈的空間感 |
Slide（滑入） | 新頁面直接覆蓋在舊頁面之上滑入 | 適合彈出視窗或層級較深的內容展示 |
Wipe（擦除） | 擦除舊頁面邊界並顯現新頁面 | 較柔緩的切換效果 |
Mask（幾何遮罩） | 以特定形狀轉場，例如圓形、百葉窗等 | 展現創意或設計感的網站效果 |
如何設定全站與單頁 Framer 轉場動畫
步驟一：進入首頁設定「All Pages」全站預設效果
首先，我們要為整個網站建立基礎的轉場方向（例如統一向左推移）。
切換至 Homepage（首頁）。
點擊選取最外層的 Desktop Breakpoint。
在右側面板找到 Effects 屬性區塊並點擊。
選擇 All Pages 選項。
💡 「All Pages」選項只會在首頁（Homepage）出現，如果找不到的話，先檢查自己有沒有在首頁喔！
步驟二：挑選轉場預設樣式與參數設定
選擇 All Pages 後，會彈出動畫設定面板，可以在「Preset」選擇你想要的效果。我們以 Push Left 來示範，接著下面還會有兩個設定選項：
This Page（當前頁面）：預設設定 100% X，代表舊頁面會往左平移自身 100% 的寬度並退出。
Any Page（新頁面）：設定新頁面從右側 100% X 位置進場推入。
除此之外也可以再自訂其他選項，例如透明度、縮放、旋轉、新增遮罩等等。進入 Transition 也可以再調整動畫曲線和動畫時間 （Duration），關於動畫曲線的設定可以參考之前寫過的《Framer 動畫曲線設定：Ease 與 Spring 怎麼選？動畫質感的秘密！》
步驟三：修正反向邏輯（Push Left vs. Push Right）
按下預覽，你會發現：從「首頁」到「關於我們」向左推移很順暢，但從「關於我們」返回「首頁」時依然向左推，此時體驗就會有一點反直覺。我們來為返回路徑加上專屬的覆蓋規則：
切換到子頁面，選取 Desktop Breakpoint，在右側點擊 Effects → Single page。
將 Target 指定為 Home，將動畫樣式改為 Push Right。
這樣設定後，就可以做出前進時畫面會向左推，後退時則會向右推回，讓整體網站的體驗更合理自然～
如何處理固定元素：建立 Layout Templates
如果你發現不該一起滑走的部分（像是 Header 導覽列）都會一起切換，可以繼續往下看該如何調整這個問題：
因為預設情況下，該頁面內的所有元素都會一起參與 Page Effects 的進場與退場動畫，對於 Header 和 Footer 這種在每個頁面都存在的固定區塊，我們需要告訴 Framer：「請把這個區域留下來，只需要替換中間的頁面內容就好」。做法就是建立全站統一模板（Layout Templates）。
第一步：建立 Layout Template
選取 Header：在 Canvas 上選取你做好的 Header 區塊。
建立模板：按右鍵選擇 Create Layout Template。
放入 Header：進入剛剛建立好的 Main 模板，把頁尾的 Footer 也剪下貼進來，放置於底部。
清理重複元素：回到其他子頁面，刪除原本手動放置的重複 Header 與 Footer。
💡 套用 Layout Templates 後，未來如果想修改 Header 的樣式，只要在模板內修改一次，全站所有頁面就會同步更新，是非常方便的功能！
第二步：關鍵！使用 Exclude 排除頁面轉場效果
建立了 Layout Templates 之後，你會發現預設情況下 Header 依然會跟著轉場推走。這是因為我們還沒開啟最關鍵的「排除設定」。
進入模板：點擊選取最外層的 Desktop Breakpoint，到右邊面板 Template → Edit。
選取 Header 容器：點選最外層的 Header 區塊。
新增 Style：在右側屬性面板的 Styles 區塊點擊新增 +。
選擇 Page Effect：在選單中找到 Page Effect，將狀態切換為 Exclude。
設定完成後，再次按下預覽，就會發現點擊導覽列切換頁面時，Header 會固定在畫面上，只有中間的頁面內容會有切換動畫了！大功告成
結語
掌握了 Framer 的 Page Effects 後，網站不再只是一張張孤立的畫面，而是一個充滿連貫動態的體驗。希望這篇筆記對正在探索 Framer 的你有所幫助。如果操作上有遇到任何問題，歡迎隨時到交流基地一起討論✨