gsap scrollTrigger 使用记录

引入外部依赖：

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

或 npm 包下载

npm i gsap --save-dev
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

使用：

gsap.registerPlugin(ScrollTrigger)  // 注册插件

方法：

方法	描述
to	到某个状态
fromTo	从某个状态到某个状态
timeline	时间轴动画，可以按照该实例化进行动画排序执行

实例style展示：

*{
    margin: 0;
    padding: 0;
}
.box {
    height: 100vh;
    background: hotpink;
}

.box4 {
    position: relative;
    height: 100vh;
}
.box2 {
    width: 100vw;
    height: 100vh;
    background: blue;
    position: absolute;
    top: 0;
    z-index: 2;
}

.box3 {
    width: 100vw;
    height: 100vh;
    background: slateblue;
    position: absolute;
    top: 0;
    z-index: 1;
    /* transform: scale(); */
}

.description {
    font-size: 24px;
    color: #fff;
    width: 40vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

实例dom展示：

<div class="box"></div>
    <div class="box4">
        <div class="box2">
            <div class="description">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro nihil unde voluptates
                quo illum odio voluptatum suscipit hic obcaecati, reiciendis, eius quibusdam perspiciatis? Temporibus, quos
                nihil. Accusamus minus quisquam perferendis?
            </div>
        </div>
        <div class="box3">
            <div class="description">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro nihil unde voluptates
                quo illum odio voluptatum suscipit hic obcaecati, reiciendis, eius quibusdam perspiciatis? Temporibus, quos
                nihil. Accusamus minus quisquam perferendis?
            </div>
        </div>
    </div>
  <div class="box"></div>

使用一：

// 创建时间轴
const t1  = new timeline({
   scrollTrigger: {
       trigger: '.box4', // 需要监听滑动入可视窗的dom选择器
       start: 'top top', // 动画开始执行的时机，第一个位置和第二个位置重合即动画开始
       end: 'bottom top', // 动画结束时机，第一个位置和第二个位置重合即动画结束
       markers: true, // 是否显示start end 的标识
       scrub: true, // 是否需要绑定滚动条和动画执行关系
       pin: true // 是否需要锁定某个dom在可视区, true固定trigger所指向的dom， 也可配置另外的dom选择器，如 '.box2'
   } 
})

使用二：

// 配置具体的动画步骤

// 当box4到达动画触发时机时 使box2 里面的 description 向上移动100px，用时10s，透明度变为0，使用power1.inout动画曲线
t1.to('.box2 .description', {
    top: -100,
    duration: 10,
    opacity: 0,
    ease: "power1.inOut",
})

// 当上面动画执行完以后执行下面动画，为了保证下面动画和上面动画同时运行，末尾配置'<'，关于不同的末尾配置还有不同的含义
// '<' 上一动画开始时同时执行
// '>' 上一动画结束时执行（默认值）
// '<+=秒' 上一动画开始多少秒后执行
// '>-秒' 上一动画结束多少秒后执行
// '-=秒' 比上一动画快多少秒执行
// '+=秒' 比上一动画慢多少秒执行
// 如果传入数值，则延迟多少秒执行
// 无任何后缀则前一动画执行完立马执行
t1.to('.box2', {
    scale: 0.2,
    x: '20%',
    duration: 10,
    opacity: 0,
    ease: "power1.inOut"
}, '<')

// 上面两次t1.to的写法可以缩写为
t1.to(...).to(...).fromTo()