vue2使用 GSAP

1. GSAP 官网

Getting Started with GSAP - Learning Center - GreenSockWelcome! In this article we’re going to cover GSAP's core fundamentals and animate some HTML elements. If that’s not your end goal, don’t worry. Whatever you plan to animate, whichever framework you use - the techniques and principles covered here will serve you well. If you just want to jump in,...https://greensock.com/get-started/2. GSAP（原名：GreenSock） 优点、官方介绍

快疯了、异常健壮、动画化任何东西、轻量化可扩展、零依赖、高级测序、专用支持、许可证

除了非常特定类型的商业用途（转售给多个客户）之外，GreenSock的许可证完全免费

gsap.to()  //  从元素开始,到指定结束值
gsap.from()  //  指定起始值，动画到结束值
gsap.fromTo()  //  自定义起始值，结束值
gsap.set()  //  立即设置属性（无动画）

/* 时间线 */

animation = gsap.timeline().to("元素", { 属性 }, 1)  //  1 代表一秒后触发
.to("元素", { 属性 }, "<")  //  < 代表 上一动画开始，我也开始
.to("元素", { 属性 }, ">")  //  > 代表 上一动画结束，我开始
.to("元素", { 属性 }, "+=1")  //  +=1 代表 上一动画结束后1秒我开始
.to("元素", { 属性 }, "-=1")  //  -=1 代表 上一动画结束前1秒我开始

3. 安装 GSAP

npm install gsap --save

// 在页面中引用

import {gsap} from 'gsap';
// ScrollTrigger  多屏滚动效果
import {ScrollTrigger} from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger)

4. 实现vivo官网横屏滚动效果

演示​​​​

<template>
  <div class="screen1">
    <div class="parallel">
      <div class="picture1">123</div>
      <div class="picture2">4565</div>
    </div>
  </div>
</template>

mounted() {
    ScrollTrigger.create({
      trigger: '.screen1',  // 触发器元素
      start: "top top",  // 滚动触发器的起始滚动位置
      end: '+=3000',  // 滚动触发器的结束滚动位置
      pin: true, // 固定界面
      markers: true, // 开启标注功能
    })
    ScrollTrigger.create({
      trigger: '.parallel',
      start: "top top",
      end: '+=3000',
      scrub: true, // true 将动画的进度直接连接到滚动器触发的进度
      animation: gsap.timeline() // animation 与滚动触发器关联的补间或时间线
          .fromTo('.picture1', {"left": '0'}, {"left": '-100%'}, 0.1)
          .fromTo('.picture2', {"left": '100%'}, {"left": '0',}, "<")
    })
}

.screen1 {
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.parallel {
    width: 100%;
    height: 100%;
    margin-top: 0;
    position: relative;
    overflow: hidden;
    z-index: 50;
    box-sizing: border-box;
}

.picture1 {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
}

.picture2 {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 128rem;
    top: 0;
}