GSAP动画库，探究苹果官网页面滚动动画是如何实现的

前言

每次浏览苹果官网时都在好奇，当我们向下滚动页面时一个个文字或图片总能缓缓浮现，往上滚动时又能慢慢收起来，这就究竟是如何实现的呢。在查阅一些资料时发现了Scrollmagic.js插件,该插件提供了灵活的滚动动画，可以自定义各种各样的效果，但是当我满怀信心地决定大干一场时，发现这个插件已经很久没有维护更新了，而且是基于jquery开发的，在引入vue3脚手架时并不适配，有感兴趣的小伙伴可以去看官网：scrollmagic.io/docs/index.... 最终，我发现了一个很强大的动画库GSAP，如官网首页所说的animate anything,它拥有着各种强大的动画能力，官网地址：gsap.com/ 本文主要对其中的一个plugin ScrollTrigger进行简单demo讲解。实现效果如下：

如何使用

1、首先需要安装gsap包，建议安装最新版

csharp 复制代码

yarn add gsap //或 npm install gsap

2、写几个简单的滚动模板

xml 复制代码

<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插件，并注册插件

javascript 复制代码

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

4、创建动画,配置动画移动的始末位置，以及触发动画的位置，动画的node节点等参数

php 复制代码

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只是GSAP中的一个插件，更多的动画效果还在学习中，感兴趣的小伙伴可以直接去官网学习查看，使用这个库能减少很多我们手写css动画的苦恼，有需要的小伙伴可直接访问本文demo地址：gitee.com/fcli/scroll...

GSAP动画库，探究苹果官网页面滚动动画是如何实现的

GSAP动画库，探究苹果官网页面滚动动画是如何实现的

前言

如何使用

更多配置

最后