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

最新推荐文章于 2025-04-03 15:37:44 发布

叶落风尘

最新推荐文章于 2025-04-03 15:37:44 发布

阅读量2.2k

点赞数 8

分类专栏：前端文章标签：前端

本文链接：https://blog.youkuaiyun.com/qq_34185872/article/details/134857317

版权

前端专栏收录该内容

112 篇文章

订阅专栏

本文介绍了如何使用GSAP库中的ScrollTrigger插件来实现苹果官网页面的平滑滚动动画效果，包括安装、模板编写、动画配置和ScrollTrigger的更多配置选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

前言

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

如何使用

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

yarn add gsap //或 npm install gsap

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

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

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

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

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);