全新网站上线：用 GSAP 打造丝滑的时间轴动画

经过数周的开发，全新的七斗半工作室网站终于上线了！这次我们使用 GSAP + ScrollTrigger 打造了流畅的滚动动画效果，从首页 Hero 区域到时间轴页面，每一个交互都经过精心设计。

为什么选择 GSAP？

在开发这个网站之前，我们尝试过多种动画方案：CSS 动画、原生 JavaScript、还有一些轻量级的动画库。但最终我们选择了 GSAP，主要是因为：

• 性能优秀 — GSAP 会自动利用 CSS transforms 和 GPU 加速，确保动画流畅
• API 简洁 — 上手简单，但功能强大，能实现复杂的动画效果
• ScrollTrigger — 强大的滚动驱动动画，让「丝滑」成为可能
• 社区活跃 — 文档完善，示例丰富，遇到问题容易找到解决方案

GSAP 是唯一一个让我觉得「动画原来可以这么简单」的库。它把复杂的东西封装得很好，让我能专注于创意本身。

时间轴页面的实现

时间轴是我们网站的核心页面，展示工作室从 2020 年到现在的每一个重要时刻。我们希望用户在滚动浏览时，每一个时间节点都能优雅地出现，就像时间在慢慢流淌。

核心代码结构

首先是 GSAP 的初始化和 ScrollTrigger 插件的注册：

// 注册 ScrollTrigger 插件
gsap.registerPlugin(ScrollTrigger);

// 时间轴项的滚动动画
document.querySelectorAll('.timeline-item').forEach((item) => {
  ScrollTrigger.create({
    trigger: item,
    start: 'top 80%',
    onEnter: () => {
      // 卡片淡入 + 上浮
      gsap.to(item.querySelector('.timeline-card'), {
        opacity: 1,
        y: 0,
        duration: 0.6,
        ease: 'power3.out'
      });
      
      // 节点缩放动画
      gsap.to(item.querySelector('.timeline-node'), {
        scale: 1,
        duration: 0.4,
        ease: 'back.out(1.7)'
      });
    },
    once: true // 只触发一次
  });
});

时间轴视觉效果

除了动画，我们还加入了一些视觉元素来增强时间轴的表现力：

• 渐变色中心线 — 从紫色到粉色再到青色，象征时间的流动
• 脉冲节点 — 当前进行中的事件节点会有脉冲动画
• 卡片悬停效果 — 鼠标悬停时卡片轻微上浮并增加阴影
• 进度条 — 页面顶部显示当前阅读进度

响应式设计

移动端的时间轴和桌面端有很大不同。桌面端我们使用左右交替的布局，而移动端则改为单列垂直布局。通过 CSS 媒体查询和一点 JavaScript 配合，可以优雅地处理这个切换：

// 检测屏幕宽度，调整时间轴布局
function adjustTimelineLayout() {
  const isMobile = window.innerWidth < 768;
  
  document.querySelectorAll('.timeline-item').forEach(item => {
    if (isMobile) {
      item.classList.add('mobile-layout');
    } else {
      item.classList.remove('mobile-layout');
    }
  });
}

window.addEventListener('resize', adjustTimelineLayout);
adjustTimelineLayout();

后续优化方向

虽然网站已经上线，但我们还有一些想法想要实现：

1. 添加页面过渡动画，让页面切换更加流畅
2. 实现懒加载，减少首屏加载时间
3. 增加一些 3D 效果，使用 Three.js 打造更震撼的视觉体验
4. 优化移动端触摸滑动体验

总结

这次网站开发让我们深刻体会到：好的动画不是炫技，而是服务于用户体验。当动画足够「丝滑」时，用户甚至不会注意到它的存在，只会感觉「这个网站用起来很舒服」。

如果你也在考虑给你的网站添加动画效果，不妨从 GSAP 开始。它的学习曲线平缓，文档完善，一定能帮你创造出令人惊艳的体验。