gsap(二) 鼠標滾動特效第一篇

動畫插件

import { ScrollTrigger } from "gsap/ScrollTrigger";
import {gsap, Expo} from 'gsap';

gsap.registerPlugin(ScrollTrigger);

動畫開始時, box5進入(第一次進入)視口

 gsap.to(".box2", {
      scrollTrigger: ".box5", //當出現這個dom的時候, .box2 會向x移動500px, 類似於一個觸發器
      x: 500
    });

添加時間線

 let t1 = gsap.timeline({
      scrollTrigger: {
        trigger: ".box5",
      },
    });

    t1.to('.box4', {x: 100, duration: 1})

start 滾動條移動的距離

number

   scrollTrigger: {
        start:100// 滾動條移動的100px時候觸發
      },

string

scrollTrigger: {
        trigger: ".box11",
        start: "center bottom",// 在.box11 中間的位置開始滾動
		// 標記設置
        markers: true,
        scrub: true,
      },
          
'top top'
當盒子移動到視口頂部的位置開始執行
'top center'
這個表示當盒子移動到視口中間的位置開始執行

.box11爲觸發器的盒子,

start是觸發滾動動畫開始的位置,兩個綠色的標記線

• 第一個參數, 默認指定dom的0%也就是top
• 第二個參數, 默認滾條的100% 也就是bottom

end是觸發滾動動畫結束的位置, 兩個紅色的標記線

• 第一個參數, 默認指定dom的100% 也就是bottom
• 第二個參數, 默認滾動條的0% 也就是top

滾動條的意思, 不是移動的距離, 而且當前頁面100%的長度,打個刻度, 跟dom 對應的重合到一起

介紹了滾動條刻度的規則, start 的刻度要大於end的刻度

scrub 跟start 配合起來

可以滾動形成滾來滾去

 gsap.registerPlugin(ScrollTrigger);
    let t1 = gsap.timeline({
      scrollTrigger: {
        trigger: ".box11",
        scrub: true,
        markers: true
      },
    });

    t1.to(".box5", {x: 350})

    let t1 = gsap.timeline({
      scrollTrigger: {
        trigger: ".box11",
        start: "center bottom",
        end: "bottom center",
        scrub: true,
        markers: true
      },
    });

滾動條從center-bottom 開始動畫, 從bottom-center 結束動畫

markers 標註設置

   markers:true
或者對象的形式
  /*標註樣式設置*/
      markers:{
        /*開始的顏色*/
        startColor:'#2e00f8',
        /*結束的顏色*/
        endColor:'#00d9ff',
        /*字體大小*/
        fontSize:'40px',
        /*距離一側的位置*/
        indent:20,
      }
 秒一樣源碼中的默認設置
  _markerDefaults = {
	  startColor: "green",
	  endColor: "red",
	  indent: 0,
	  fontSize: "16px",
	  fontWeight: "normal"
	}

寫法案例

    gsap.to('.box4', {
      x: 500,
      rotation: 360,
      scrollTrigger: {
        trigger: '.box4',
        scrub: true,
        markers: true,
        end:'0% 40%'
        // start end 根據根據markers 顯示的刻度進行調整
      }
    })

第二種寫法

  const anim = gsap.to(".c", {
      x: 400,
      rotation: 360,
      duration: 3
    });
    ScrollTrigger.create({
      trigger: ".box5",// 當.box5 出現時候觸發
      animation: anim
    });

切換動作 toggleActions

toggleActions: "play pause resume reset"

進入時會播放(play)動畫，離開時會暫停(pause)，再次向後進入時會繼續播放(resume),,,,,,,,,,,,, 當一直滾動回到起點是重置(reset)

可以使用的關鍵詞

“play”、“pause”、“resume”、“reset”、“restart”、“complete”、“reverse”和“none”

 ScrollTrigger.defaults({
      toggleActions: "play pause resume reset"
      // 進入時,播放,離開時暫停,再次進入繼續播放,直到最後重置
    });
    gsap.to(".box5", {
      scrollTrigger: ".box5",
      duration: 4,
      rotation: 360
    });

cssPlugin

在cssPlugin 的幫助下, gsap 可以機會任何css相關的dom元素設置屬性

gsap.to('.box',{
      duration:4,
      rotation:180,
      scaleX:.2
    })

進度條

 gsap.from(".line", {
      scrollTrigger: {
        trigger: ".line",
        scrub: true,
        start: "top bottom",
        end: "top top",
        markers: true,
      },
      scaleX: 0,
      transformOrigin: "left center",
      // 移動的圓點從長度: left, 高度: 中
      ease: "none"
      // 去掉默認的速度函數
    });

<div class="line"></div>

.line{
  width: 100%;
  max-width: 800px;
  height: 8px;
  margin: 0 0 10px 0;
  position: relative;
  display: inline-block;
  background-color: rgb(200, 130, 130);
}

gsap.from(".line2", {
      scrollTrigger: {
        trigger: ".box2",
        scrub: true,
        pin: true,// 在.box2的外層的盒子加個盒子`.pin-spacer`
        start: "top top",
        end: "+=100%",
         // 因爲直接有個參數, 所以滾動條的開始標記和結束標記都是top
        markers: true,
      },
      scaleX: 0,
      transformOrigin: "left center",
      ease: "none"
    });

<div style="height: 100vh;background-color: lightpink;" class="box2">
  <div class="line2"></div>

</div>

主要的設計師end:"+=100%"

進度條3

 var tl = gsap.timeline({
      scrollTrigger: {
        trigger: ".purple",
        scrub: true,
        pin: true,
        start: "top top",
        end: "+=100%"
      }
    });

    tl.from(".purple p", {scale: 0.3, rotation:45, autoAlpha: 0, ease: "power2"})
      // autoAlpha:0  淡入淡出 0 隱藏 , visibility:hidden 
      .from(".line3", {scaleX: 0, transformOrigin: "left center", ease: "none"}, 0)
      .to(".purple", {backgroundColor: "#28a92b"}, 0);

# 滾動特效4

當ScrollTrigger激活時，你可以固定一個元素，這樣當滾動位置在開始和結束元素/值之間時，它就會固定在原地

pin

pin:true 就是自身元素

pin:'.xxx' 就是指定的元素

起到的作用是, 滾動固定的作用

   ScrollTrigger.create({
      trigger: "#orange",
      start: "top top",
      end: "bottom 150px", // 150px滾動條的長度
      pin: "#orange-content",// 就也是固定的內容的部分
      markers:true
    });

    ScrollTrigger.create({
      trigger: "#red",
      start: "top center",
      end: "+=200", // 超過開始200px
      pin: "#red-content",
      markers:true
    });

滾動5,滾動執行的函數

• onEnter - 向前越過“start”(通常在觸發器滾動到視圖時)

• onLeave - f向前越過"end"(通常在觸發器滾動出視圖時)

• onEnterBack - 向後過去“end”(通常當觸發器滾動回視圖時)

• onLeaveBack -向後過“start”(通常當觸發器向後淡出視圖時)

• onUpdate - 每次滾動位置變化，而在“開始”和“結束”之間。

• onToggle - 在任意方向傳遞開始或結束

• onRefreshInit -在測量值重新計算之前(通常在調整大小時)

• onRefresh -在重新計算測量值之後(通常在調整大小時)

  const animation = gsap.from(".line-1", {
        scaleX: 0,
        transformOrigin: "left center",
        ease: "none"
      });
      const logRed = (text: any, e: any = 1) => {
        console.log(text, e);
      }
      ScrollTrigger.create({
        trigger: ".red",
        start: "top 100px",
        end: "bottom bottom-=100px",
        // 滾動條刻度100px開始, 滾動條-100px的位置結束
        markers: true,
        scrub: true,
        animation: animation,
        onEnter: () => logRed("越過start這根線"),
        onLeave: () => logRed("越過end這根線"),
        onEnterBack: () => logRed("返回越過end這根線"),
        onLeaveBack: () => logRed("返回越過start這根線"),
        onRefresh: (e: any) => logRed("默認執行兩次", e),
        // onUpdate: self => redProgress.innerText = "progress: " + self.progress.toFixed(3)
        onUpdate: (self: any) => {
          // 更新的值
          console.log(self);
          console.log(self.progress.toFixed(3));
        }
      });