工作室重生：FUTURE THREE®与自我重新设计艺术

FUTURE THREE®如何重新构想其品牌、团队和数字形象以反映他们现在的身份。

设计实现

一旦设计确定，真正的挑战就开始了：将其变为现实。为此，我们与顶尖网页开发人员Eduard Bodak合作。我们的目标很明确：高效的代码、流畅的动效和令人难忘的数字体验。不是普通的作品集，而是一个让你记住的工作室。

1. 按钮和链接交互

许多网站在悬停时使用类似的交错文本动画，但我们重新设计了它以实现精确性和独特性。通过使用GSAP的SplitText和propIndex: true选项，每个分割字符都获得自己的CSS变量：

1

new SplitText('.link', { type: 'chars', propIndex: true });

这意味着元素中的每个字符都有这样的样式：

1
2
3
4


<span style="--char: 1;">F</span>
<span style="--char: 2;">U</span>
<span style="--char: 3;">T</span>
...

这使我们能够直接在CSS中创建平滑的交错动画：

1
2
3
4
5
6
7


.link span {
  transition: transform 0.5s calc((var(--char) - 1) * 0.024s) var(--basic-ease);
}
.link:hover span {
  transform: translateY(-2px);
  text-shadow: 0 1px 4px rgba(255, 50, 50, 0.8);
}

2. 入场动画和页面过渡

入场序列结合了GSAP和Lottie。在Lottie加载器播放时，滚动被禁用。完成后，触发页面过渡，启动Lenis（平滑滚动）并激活文本动画。

1
2
3
4
5


lottieAnimation.addEventListener('complete', () => {
  gsap.to('.loader', { autoAlpha: 0 });
  document.documentElement.classList.add('is-ready');
  lenis.start();
});

当is-ready类添加到时，具有data-mask-animation-in属性的元素开始使用CSS clip-path过渡进行显示动画：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


[data-mask-animation-in] {
  transform: translate3d(0, 100%, 0);
  clip-path: inset(-100% -10% 102% -10%);
  transition: clip-path 0.5s var(--natural-ease), transform 0.5s var(--natural-ease);
}

html.is-ready [data-mask-animation-in] {
  transform: translate3d(0, 0, 0);
  clip-path: inset(0% -10% -10% -10%);
}

3. 项目悬停交互

悬停在项目预览上会显示带有短暂过渡延迟的次要图像。理念是：避免突然的图像变化，同时防止缓慢的淡入效果。

1
2
3
4
5
6
7
8
9


.project:hover .preview-secondary {
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.5s 0.1s var(--basic-ease), opacity 0.2s ease-out;
}
.project .preview-secondary {
  opacity: 0;
  transform: translateY(10px);
}

4. 视差滚动效果

我们没有使用沉重的滚动库，而是纯粹使用GSAP ScrollTrigger构建视差效果：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


let tl = gsap.timeline({
  scrollTrigger: {
    trigger: '.project-image',
    start: 'top bottom',
    end: 'bottom top',
    scrub: 0
  }
});

tl.fromTo('.project-image', { yPercent: 0 }, { yPercent: -10, ease: 'none' });

为了防止滚动时出现间隙，图像被包裹在overflow-hidden容器中并略微缩放：

1
2
3
4


.project-image img {
  transform: scale(1.1);
  transform-origin: bottom;
}

整个项目在Webflow中开发，我们将平台推向了极限，结合自定义代码和GSAP来实现整个网站平滑一致的性能。

FUTURE THREE®工作室重生：GSAP动画与Webflow开发的完美结合

本文详细介绍了FUTURE THREE®设计工作室如何使用Webflow平台和GSAP动画库重建其数字形象，包含具体的代码实现和技术架构，展示了按钮交互、页面过渡、视差滚动等前端开发技巧。