Vue基于gsap页面进入推进动画

安装

js动画库
npm install gsap

gasp官网

代码

<template>
  <!-- 这是页面的结构 -->
  <div class="box">
    <!-- 用于模拟页面中的其他内容，滚动条可用来查看整个动画效果 -->
    <div style="height: 100vh; background-color: red">14</div>

    <!-- 这是 logo 部分，包含三个文字元素 -->
    <div ref="logo" class="preview center">
       <div class="logo-text-1">去</div>
        <div class="logo-text-1">哪</div>  <!-- logo 的第一部分文字 -->
        <div class="logo-text-2">旅</div>  <!-- logo 的第二部分文字 -->
        <div class="logo-text-3">行</div>  <!-- logo 的第三部分文字 -->
    </div>
  </div>
</template>

<script setup>
import gsap from 'gsap';  // 导入 GSAP 动画库
import { ScrollTrigger } from "gsap/ScrollTrigger";  // 导入 GSAP 的 ScrollTrigger 插件，用于实现滚动触发动画
gsap.registerPlugin(ScrollTrigger);  // 注册 ScrollTrigger 插件，使其可用

import { onMounted, ref } from "vue";  // 导入 Vue 相关的生命周期钩子和引用（ref）

// 使用 Vue 的生命周期钩子 onMounted，当组件挂载到页面时执行动画
onMounted(() => {
  animation();  // 调用动画函数
});

// 创建一个对 logo 元素的引用，后续用于获取 DOM 元素
const logo = ref(null);

// 定义动画函数
function animation() {
  gsap.fromTo(logo.value,  // 动画的目标元素是 logo 元素
    {
      fontSize: '10vw',  // 初始字体大小为 10vw
      color: '#ffff',  // 初始文字颜色为白色
      textAlign: 'center',  // 初始文字居中对齐
    },
    {
      duration: 4,  // 动画持续时间为 4 秒
      ease: 'power1',  // 动画的缓动效果，'power1' 表示较为平缓的加速/减速曲线
      fontSize: '28vw',  // 动画结束时字体大小为 28vw（变大）
      color: 'transparent',  // 动画结束时文字颜色变为透明
      scrollTrigger: {  // 使用 ScrollTrigger 插件来基于滚动位置触发动画
        trigger: logo.value,  // 当 logo 元素滚动到视口时触发动画
        scrub: true,  // 启用 scrub 功能，允许滚动时平滑控制动画进度
        pin: true,  // 使元素在滚动时固定在页面上，直到动画结束
        start: 'top center',  // 当 logo 元素的顶部进入视口中心时开始动画
        end: 'bottom top'  // 当 logo 元素的底部进入视口顶部时结束动画
      }
    }
  );
}
</script>

<style scoped>
/* 定义页面的整体样式 */
.box {
  background-color: #c36ed9;  /* 设置背景颜色为紫色 */
  height: 5000px;  /* 设置 box 的高度为 5000px，确保页面有足够的高度可以滚动 */
  overflow: hidden;  /* 防止超出 box 的内容显示出来 */
}

/* 定义每个 logo 部分的样式 */
.logo-text-1 {
  background: url("assets/site_1.jpeg") no-repeat center/cover;  /* 设置 logo-text-1 的背景图像，并使其覆盖整个区域 */
  background-clip: text;  /* 将背景应用到文本上，实现文字填充背景图像 */
  font-weight: bold;  /* 设置字体加粗 */
}

.logo-text-2 {
  background: url("assets/site_2.jpg") no-repeat center/cover;  /* 设置 logo-text-2 的背景图像 */
  background-clip: text;  /* 将背景应用到文本上 */
  font-weight: bold;  /* 字体加粗 */
}

.logo-text-3 {
  background: url("assets/site_3.jpg") no-repeat center/cover;  /* 设置 logo-text-3 的背景图像 */
  background-clip: text;  /* 将背景应用到文本上 */
  font-weight: bold;  /* 字体加粗 */
}

/* 居中对齐 logo 元素 */
.center {
  display: flex;  /* 使用 Flexbox 布局 */
  justify-content: center;  /* 水平居中 */
  align-items: center;  /* 垂直居中 */
}
</style>