gsap核心语法

gsap的核心是补间动画

gsap补间动画主要分为四类

gsap.to()

从元素的起始值开始，动画到指定的位置

语法

gsap.to(元素，{属性})

常见属性

gsap.from()

指定起始值，动画到结束值

gsap.fromTo()

定义起始值和结束值

gsap.set()

直接跳过去，没有动画

时间线

让动画依次播放

语法

gsap.timeline()

添加动画序列

事件线.to(元素，{属性}，位置参数)

timeline.to(".box1", {
  x: 500,
  duration: 1
})
timeline.to(".box2", {
  x: 500,
  duration: 1
})
timeline.to(".box3", {
  x: 500,
  duration: 1
})

位置参数

固定时间

// 1秒钟后触发
timeline.to(".box1", {
  x: 500,
  duration: 1,
}, 1);

上一个动画开始，我也开始

使用 <

timeline.to(".box2", {
  x: 500,
  duration: 1,
}, "<");

上一个动画结束后1秒我开始

使用 +=1

timeline.to(".box3", {
  x: 500,
  duration: 1,
}, "+=1");

上一个动画结束前1秒我开始

使用 -=1

timeline.to(".box3", {
  x: 500,
  duration: 1,
}, "-=1");

ScrollTrigger

ScrollTirgger.create({
    // 触发的元素
    trigger: '.box',
    // 开始的位置
    start: "top top",
    // 结束的位置
    end: "+=300",
    // 动画的进度和滚动条的进度链接到一起
    scrub: true,
    animation:
        gsap.to('.box',{
            x: 200,
            y: 500,
            rotation: 180
        })
})

多屏滚动

ScrollTrigger.create({
    // 触发元素第二屏
    trigger: '.screen2',
    // 起始位置
    start: 'top top',
    // 结束位置
    end: '+=1000',
    // 开启标注显示位置
    markers: true,
    // 让自身开启固定定位
    pin: true,
    animation: 动画
})

通过滚动条播放视频

onUpdate() {} 滚动位置更改时都会调用

ScrollTrigger.create({
    onUpdate(self) {
    // 播放视频
    const summary = document.querySelector('.summary)
    try{
        // self.progress 整体进度
        // summary.duration 视频的总时长
        summary.currentTime = self.progress * summary.duration
    }
    catch() {
    }
    }
})