从空白到混沌：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秒的微小延迟。

页脚交互效果

页脚实现了与鼠标移动连接的克隆机器。每次鼠标移动200px时，按钮元素会被复制两次，最多200个副本，副本被放置在随机绝对位置。

成果与反思

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

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