GSAP動畫庫，探究蘋果官網頁面滾動動畫是如何實現的

前言

每次瀏覽蘋果官網時都在好奇，當我們向下滾動頁面時一個個文字或圖片總能緩緩浮現，往上滾動時又能慢慢收起來，這就究竟是如是實現的呢。在查閱一些資料時發現了Scrollmagic.js插件,該插件提供了靈活的滾動動畫，可以自定義各種各樣的效果，但是當我滿懷信心的決定大干一場時，發現這個插件已經很久沒有維護更新了，而且是基于jquery開發的，在引入vue3腳手架時并不適配，有感興趣的小伙伴可以去看官網：http://scrollmagic.io/docs/index.html。最終，我發現了一個很強大的動畫庫GSAP，如官網首頁所說的animate anything,它擁有著各種強大的動畫能力，官網地址：https://gsap.com/。本文主要對其中的一個plugin ScrollTrigger進行簡單demo講解。實現效果如下：

如何使用

1、首先需要安裝gsap包，建議安裝最新版

yarn add gsap //或 npm install gsap

2、寫幾個簡單的滾動模板

<template><section class="section flex-center column blue normal" ref="header"><div class="box">box</div><div class="box">box</div><div class="box">box</div></section><div class="section flex-center column normal" ref="top"><div class="box">box</div><div class="box">box</div><div class="box">box</div></div><div class="section flex-center column" ref="main"><div class="box">box</div><div class="box">box</div><div class="box">box</div></div><section class="section flex-center orange column" ref="bottom"> <div class="box">box</div><div class="box">box</div><div class="box">box</div></section>
</template>

3、引入GSAP以及ScrollTrigger插件，并注冊插件

import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);

4、創建動畫,配置動畫移動的始末位置，以及觸發動畫的位置，動畫的node節點等參數

const header=ref();ctx = gsap.context((self:any) => {const boxes = self.selector('.box');boxes.forEach((box:any) => {gsap.to(box, {x: 300,scrollTrigger: {trigger: box,start: 'top 40%',end: '+=500',scrub: true,},});});}, header.value); 

更多配置

ScrollTrigger的主要配置可以參考下面的代碼：

• containerAnimation：觸發由垂直滾動控制的“水平”滾動部分內的動畫
• end：確定ScrollTrigger的結束位置
• endTrigger：在正常文檔流中的位置用于計算ScrollTrigger結束的位置
• fastScrollEnd：它將強制完成當前ScrollTrigger的動畫,避免在用戶快速滾動時重疊動畫
• horizontal：使用水平滾動
• onRefresh：當刷新發生時的回調（通常是一個resize事件），它強制ScrollTrigger重新計算它的所有位置
• onToggle：當ScrollTrigger從非活動切換到活動時的回調
• scrub：允許您在用戶停止滾動后捕捉到某些進度值
• start：確定ScrollTrigger的起始位置
• toggleActions：將在進入時播放動畫，在離開時暫停動畫，在再次向后進入時恢復動畫，并在滾動到起點后重置（回退到起點）。您可以為每個操作使用以下任何關鍵字：“播放”、“暫停”、“恢復”、“重置”、“重新啟動”、“完成”、“反轉”和“無”
• toggleClass：當ScrollTrigger切換活動/非活動時，向一個元素（或多個元素）添加/刪除一個類

最后

ScrollTrigger只是GSAP中的一個插件，更多的動畫效果還在學習中，感興趣的小伙伴可以直接去官網學習查看，使用這個庫能減少很多我們手寫css動畫的苦惱，有需要的小伙伴可直接訪問本文demo地址：https://gitee.com/fcli/scroll-trigger.git