Back to Blog
Featured Article

使用 GSAP ScrollTrigger 实现底部滑出覆盖层效果

Today
4 min read
2,903 views
182 likes
Category
Beginner
#GSAP#ScrollTrigger#动画#前端开发#React

使用 GSAP ScrollTrigger 实现底部滑出覆盖层效果

在现代网页设计中，滚动触发的动画效果能够显著提升用户体验。今天我们将深入探讨如何使用 GSAP ScrollTrigger 实现一个优雅的底部滑出覆盖层效果，这种效果常见于作品集网站和产品展示页面。

效果预览

当用户向下滚动时，原有的页面内容会被固定住，同时一个新的覆盖层从屏幕底部平滑滑上，完全覆盖原有内容。这种效果创造了一种"翻页"的视觉体验，非常适合用于展示不同的内容区块。

技术栈

  • GSAP (GreenSock Animation Platform) - 高性能动画库
  • ScrollTrigger - GSAP 的滚动触发插件
  • React + TypeScript - 现代前端框架
  • Tailwind CSS - 样式框架

核心实现原理

1. 基本架构设计

export function OverlayComponent() {
  const overlayRef = useRef<HTMLDivElement>(null);
  const contentRef = useRef<HTMLDivElement>(null);
 
  useLayoutEffect(() => {
    // GSAP 动画逻辑
  }, []);
 
  return (
    <div ref={overlayRef} className="fixed inset-0">
      {/* 覆盖层内容 */}
    </div>
  );
}

2. 关键参数配置

实现这个效果的核心在于正确配置 ScrollTrigger 的参数：

ScrollTrigger.create({
  trigger: globeSection,    // 触发器元素
  start: "top top",         // 开始位置
  end: "+=100%",           // 结束位置
  scrub: 1,                // 平滑联动
  pin: globeSection,       // 固定元素
  pinSpacing: false,       // 不添加额外间距
  onUpdate: (self) => {
    // 动画更新逻辑
  }
});

完整代码实现

第一步：设置初始状态

// 1. 设置覆盖层初始状态 - 隐藏在底部
gsap.set(overlayRef.current, {
  yPercent: 100,  // 关键：使用 100 隐藏在底部
  zIndex: 1000
});
 
// 2. 初始化内容元素 - 从下方开始
gsap.set(contentRef.current!.children, {
  y: 100,
  opacity: 0,
});

关键点解析：

  • yPercent: 100 将覆盖层完全移出屏幕底部
  • zIndex: 1000 确保覆盖层在最上层
  • 内容元素初始位置设为 y: 100，为后续动画做准备

第二步：创建 ScrollTrigger

ScrollTrigger.create({
  trigger: globeSection,        // 使用目标页面作为触发器
  start: "top top", 
  end: "+=100%",               // 滚动一个视口高度的距离
  scrub: 1,                    // 平滑的滚动联动
  pin: globeSection,           // 固定目标页面
  pinSpacing: false,           // 不添加额外间距
  onUpdate: (self) => {
    const progress = self.progress;
    // 覆盖层从底部向上滑出（100% 到 0%）
    const yValue = 100 - (progress * 100);
    
    gsap.set(overlayRef.current, {
      yPercent: yValue,
      ease: "none"
    });
    
    // 内容从下往上出现
    if (progress > 0.3) {
      gsap.to(contentRef.current!.children, {
        y: 0,
        opacity: 1,
        duration: 0.8,
        stagger: 0.1,
        ease: "power2.out",
        overwrite: "auto"
      });
    }
  },
  markers: process.env.NODE_ENV === 'development'
});

第三步：完整的 React 组件

"use client";
 
import { useRef, useLayoutEffect } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
 
// 注册 GSAP 插件
gsap.registerPlugin(ScrollTrigger);
 
export function OverlaySlideUpComponent() {
  const overlayRef = useRef<HTMLDivElement>(null);
  const contentRef = useRef<HTMLDivElement>(null);
 
  // 服务端渲染兼容性处理
  const useIsomorphicLayoutEffect =
    typeof window !== "undefined" ? useLayoutEffect : () => {};
 
  useIsomorphicLayoutEffect(() => {
    if (!overlayRef.current || !contentRef.current) return;
 
    // 使用 gsap.context 确保正确清理
    const ctx = gsap.context(() => {
      // 找到目标页面元素
      const targetSection = document.querySelector('.target-section');
      if (!targetSection) return;
 
      // 初始化覆盖层
      gsap.set(overlayRef.current, {
        yPercent: 100,
        zIndex: 1000
      });
 
      // 初始化内容元素
      gsap.set(contentRef.current!.children, {
        y: 100,
        opacity: 0,
      });
 
      // 创建 ScrollTrigger
      ScrollTrigger.create({
        trigger: targetSection,
        start: "top top", 
        end: "+=100%", 
        scrub: 1,
        pin: targetSection,
        pinSpacing: false,
        onUpdate: (self) => {
          const progress = self.progress;
          const yValue = 100 - (progress * 100);
          
          gsap.set(overlayRef.current, {
            yPercent: yValue,
            ease: "none"
          });
          
          if (progress > 0.3) {
            gsap.to(contentRef.current!.children, {
              y: 0,
              opacity: 1,
              duration: 0.8,
              stagger: 0.1,
              ease: "power2.out",
              overwrite: "auto"
            });
          }
        },
        markers: process.env.NODE_ENV === 'development'
      });
    });
 
    return () => {
      ctx.revert();
    };
  }, []);
 
  return (
    <div
      ref={overlayRef}
      className="fixed inset-0 w-full h-full bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 overflow-auto"
      style={{
        willChange: "transform",
        zIndex: 1000
      }}
    >
      <div className="relative z-10 min-h-full flex flex-col">
        <div className="text-center pt-20 pb-16">
          <h2 className="text-6xl md:text-7xl font-bold text-white mb-6">
            覆盖层内容
          </h2>
        </div>
 
        <div ref={contentRef} className="flex-1 px-6 pb-20">
          {/* 你的内容元素 */}
          <div className="max-w-6xl mx-auto">
            {/* 内容项目 */}
          </div>
        </div>
      </div>
    </div>
  );
}

关键技术点解析

1. yPercent vs transform

使用 yPercent 而不是固定的 transform 值有以下优势：

  • 响应式友好：自动适应不同屏幕尺寸
  • 性能更好：GSAP 内部优化
  • 计算简单：百分比值更直观

2. pin 机制的工作原理

pin: targetSection,    // 固定目标元素
pinSpacing: false,     // 不添加额外间距
  • pin: true 或 pin: element 会在滚动过程中固定指定元素
  • pinSpacing: false 防止 GSAP 自动添加间距，避免布局跳动

3. scrub 参数的影响

scrub: 1,  // 平滑联动，1秒延迟
scrub: true,  // 直接联动，无延迟
scrub: 0.5,   // 0.5秒延迟

4. 性能优化技巧

// 使用 willChange 启用硬件加速
style={{
  willChange: "transform",
  zIndex: 1000
}}
 
// 使用 overwrite 防止动画冲突
gsap.to(element, {
  // ...
  overwrite: "auto"
});
 
// 使用 ease: "none" 确保平滑联动
gsap.set(overlayRef.current, {
  yPercent: yValue,
  ease: "none"  // 关键：确保与滚动同步
});

常见问题和解决方案

问题 1：覆盖层出现黑色间隙

原因：覆盖层定位不准确或初始状态设置错误

解决方案：

// 确保覆盖层完全覆盖屏幕
className="fixed inset-0 w-full h-full"
style={{
  position: 'fixed',
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  width: '100vw',
  height: '100vh'
}}

问题 2：目标页面没有被固定

原因：选择器错误或元素不存在

解决方案：

// 确保正确选择目标元素
const targetSection = document.querySelector('.target-section');
if (!targetSection) {
  console.warn('Target section not found');
  return;
}

问题 3：内容从上往下出现而不是从下往上

原因：初始位置和动画方向设置错误

解决方案：

// 初始化：内容在下方
gsap.set(contentRef.current!.children, {
  y: 100,        // 正值：向下偏移
  opacity: 0,
});
 
// 动画：移动到原位置
gsap.to(contentRef.current!.children, {
  y: 0,          // 移动到原位置
  opacity: 1,
});

问题 4：动画不够流畅

解决方案：

// 1. 使用硬件加速
style={{ willChange: "transform" }}
 
// 2. 优化 scrub 值
scrub: 0.5,  // 减少延迟
 
// 3. 使用 force3D
gsap.set(element, {
  force3D: true
});

移动端优化

考虑到移动端性能，可以添加以下优化：

// 检测设备性能
const isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
const isLowPerformance = navigator.hardwareConcurrency < 4;
 
if (isMobile || isLowPerformance) {
  // 简化动画
  ScrollTrigger.create({
    // ... 基本配置
    scrub: 0.1,  // 更快的响应
    // 减少复杂动画
  });
}

浏览器兼容性

  • 现代浏览器：完全支持
  • IE11：需要 polyfill
  • Safari：注意 transform 前缀
// Safari 兼容性
style={{
  WebkitTransform: 'translateZ(0)',
  WebkitBackfaceVisibility: 'hidden'
}}

总结

通过本文的详细讲解，我们学会了如何使用 GSAP ScrollTrigger 实现底部滑出覆盖层效果。关键要点包括：

  1. 正确的初始状态设置：yPercent: 100 隐藏覆盖层
  2. 合理的 ScrollTrigger 配置：pin + scrub 实现平滑联动
  3. 性能优化：使用硬件加速和合理的动画参数
  4. 错误处理：确保元素存在和正确的清理机制

这个效果不仅视觉效果出色，还能有效引导用户注意力，是现代网页设计中的一个重要技巧。

相关资源

希望这篇文章对你实现类似效果有所帮助。如果有任何问题，欢迎在评论区讨论！

CleanLove

Written by CleanLove

Full-stack developer passionate about modern web technologies

WeChatDouyin (TikTok)DouyinBilibiliBilibiliGitHub

Continue Reading

More Articles

Explore All Posts

Discover more insights about development, design, and cutting-edge technology.

Browse Articles
About

Get to Know Me

Learn about my background, skills, and what drives my passion for technology.

View Profile
Initializing application
Loading page content, please wait...