介绍

GSAP 用于创建高性能、可控制的动画效果。由 GreenSock 团队开发，旨在提供流畅、快速、稳定的动画效果，并且兼容各种浏览器。 提供了多个插件，扩展了动画的功能，如 ScrollTrigger（滚动触发动画）、DrawSVG（绘制路径动画）、MorphSVG（路径形状变换）等。通过绑定滚动条制作动态效果。

效果

页面进前

随着滚动条的滚动放大

进入后

安装

 npm install gsap

代码

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

<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>  <!-- logo 的第一部分文字 -->
        <div class="logo-text-2">旅</div>  <!-- logo 的第二部分文字 -->
        <div class="logo-text-3">行</div>  <!-- logo 的第三部分文字 -->
    </div>
  </div>
</template>

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

效果灵感来源QQ官网

---

页面进入时推进动画

页面进入时

页面进入后

<template>
  <div class="box">
    <!-- 这是标题容器，用来显示 "去哪旅行" -->
    <div class="title-text">
      <h1>去哪旅行</h1>
    </div>
  </div>
</template>

<style scoped>
/* 外层容器，设置背景颜色和高度 */
.box{
  background-color: royalblue; /* 设置背景颜色为皇家蓝 */
  height: 1000px; /* 设置容器的高度为1000px */
  overflow: hidden; /* 隐藏溢出的内容 */
}

/* 标题样式 */
.title-text{
  text-align: center; /* 文字居中对齐 */
  display: flex; /* 使用flexbox来居中元素 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  font-size: 8vw; /* 字体大小为视口宽度的8% */
  
  background: url("assets/site_4.png") no-repeat center/cover; /* 使用背景图，居中且覆盖容器 */
  background-clip: text; /* 背景裁剪为文字形状 */
  color: transparent; /* 文字颜色设置为透明，使背景图显示 */
  
  animation: scale 3s forwards; /* 添加动画效果：缩放动画 */
  white-space: nowrap; /* 禁止文字换行 */
  letter-spacing: 0.1em; /* 调整字间距，增加文字间的空隙 */
}

/* 动画定义 */
@keyframes scale {
  from{
    font-size: 30vw; /* 初始字体大小为30vw（视口宽度的30%） */
  }
  to{
    font-size: 8vw; /* 动画结束时字体大小为8vw */
    color: #ffff; /* 文字颜色为白色 */
    
    /* 为文字添加发光效果 */
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.7), /* 第一个阴影效果 */
                 0 0 10px rgba(255, 255, 255, 0.7), /* 第二个阴影效果 */
                 0 0 20px rgba(255, 255, 255, 0.7); /* 第三个阴影效果 */
  }
}

</style>