从空白到混沌：Eloy Benoffi基于Webflow和GSAP打造的粗野主义故障风作品集

创作理念

作为一个实验性UI设计师和Webflow开发者，Eloy Benoffi希望通过自己的作品集网站传达三个核心理念：

极繁主义：更多即是更多，不因追求清晰度而缩减功能或细节
粗野主义：元素可以大胆、粗糙、直面用户，形状可以锐利，故障效果可以明显
趣味性：在个人项目中保持乐趣，不受外界期望约束

技术栈选择

Webflow

作为Webflow认证合作伙伴，Eloy选择Webflow作为基础开发平台，因为它能够以简单全面的方式构建复杂的HTML和CSS布局，同时允许自定义代码的介入。

GSAP动画库

运动效果是本网站的关键元素，GSAP提供了创建微交互、大型过渡和复杂时间轴动画的灵活性。使用的GSAP插件包括：

ScrollTrigger：处理所有滚动动画
SplitText：实现悬停效果和流畅的分割文本过渡
Text插件：轻松更改文本内容
Draggable + Inertia：构建作品集部分的滑块
Observer、ScrambleText和ScrollTo：辅助其他功能

具体实现细节

加载动画与英雄区域

网站加载时，用户首先看到的是细节最丰富的英雄区域。设计基于作者的"Nature is Watching"作品，重用眼之花资源和ASCII版本作为装饰。

加载动画的理念是从简化版本开始，随着容器扩展逐渐添加元素。整个区域在加载条增长时被缩放，加载条随后变成导航栏。

位置彩蛋

内容加载后，位置元素（左下角）有一个小彩蛋。当悬停时，文本会在当前位置（马德里）和出生地（马德普拉塔）之间切换，包括时区和坐标信息。

实现代码如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


function setLocationMardel() {
  let LocationToMardel = gsap.timeline();
    
  LocationToMardel.fromTo(
    "[location-type-01][type-txt]",
    {
      text: {
        value: ">>>based in madrid, spain",
      },
    },
    {
      text: {
        value: ">>>born in mar del plata, arg",
        speed: 1,
        preserveSpaces: true,
        padSpace: true,
        type: "diff",
      },
      duration: 0.3,
      ease: "none",
    },
    0
  )
  // ... 其他位置信息变化
}

const heroMeta = document.querySelector(".hero-meta");
heroMeta.addEventListener("mouseenter", () => {
  setLocationMardel();
});

SVG花朵动画

当用户向下滚动离开英雄区域时，背景的ASCII花朵开始失去字符。这是通过SVG和GSAP ScrollTrigger实现的：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


let tlHeroSVG = gsap.timeline({
  scrollTrigger: {
    trigger: '.hero-section',
    start: 'top bottom',
    end: 'bottom-=50% top',
    scrub: 8,
  },
});

tlHeroSVG.to('.hero-flower_03 path', {
  stagger: {
    each: 0.1,
    from: 'random',
  },
  opacity: 0,
  duration: 2,
  ease: 'bounce.inOut',
});

作品区域过渡

作品区域的标题既作为"Selected Work"的标题，也作为英雄区域混乱与作品内容之间的过渡。通过设置多个具有overflow: hidden的div行，并在每行内垂直堆叠至少三个"Selected Work"文本副本，创建了流畅的滚动效果。

项目展示动画

选定的项目使用Draggable和Inertia插件构建的水平滑块展示。为了以非凡方式揭示内容，创建了一个四步时间轴，通过以下比例值随机设置每个可见图形的比例：1.75 → 1.5 → 1.25 → 1，步骤之间有0.15秒的微小延迟。

页脚交互

页脚部分实现了与鼠标移动相关的克隆机器。只有一个按钮元素，使用JavaScript创建了一个函数，每次鼠标在任何方向移动200px时复制元素两次，最多200个副本，并将克隆体放置在随机绝对位置。

成果与反思

该作品集网站获得了Awwwards荣誉奖、GSAP当日最佳网站，以及CSSDA最佳UI、最佳UX、最佳创新和特别表彰奖。

Eloy认为，在这个AI生成内容和销售优化模板的新时代，我们应该为人类的真实性、意向性甚至错误提供空间——这些品质在未来可能会比以往任何时候都更加重要。