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

设计理念的形成

作品集的设计过程经历了16次Figma迭代，最终确立了三个核心理念：

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

技术栈选择

Webflow作为基础

作为Webflow认证合作伙伴，作者选择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花朵开始失去字符：

 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',
});

作品区域过渡动画

创建迷幻标题效果，使用多个div行和GSAP时间轴：

 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


let tlWorkScroll = gsap.timeline({
  scrollTrigger: {
    trigger: '.work-section',
    start: 'top bottom',
    end: 'bottom-=60% top',
    scrub: 0.6,
  },
});

tlWorkScroll.fromTo(
  '.work-header .title-row_33 .title-txt',
  {
    yPercent: 0,
  },
  {
    yPercent: -300,
    ease: 'power3.in',
    duration: 2,
    stagger: {
      amount: 2,
      from: 'start',
    },
  },
  0
);
// ... 更多动画层级

作品卡片揭示效果

使用四步时间轴随机设置图形缩放：

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


tlWorkCardReveal.fromTo(
  wCardItems,
  {
    scale: 1.75,
  },
  {
    scale: 1.5,
    duration: 0.25,
    ease: 'power3.in',
    stagger: {
      amount: 0.2,
      from: 'random',
      ease: 'power1.out',
    },
  },
  0
);
// ... 更多缩放步骤

页脚交互效果

实现鼠标移动克隆效果：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


gsap.to(generatedCopies, {
  opacity: 0,
  scale: 0.6,
  duration: 0.2,
  ease: 'back.in(1.7)',
  stagger: {
    amount: 0.4,
    from: 'random',
    ease: 'power1.out',
  },
});

成果与反思

该作品集获得了Awwwards荣誉奖、GSAP当日最佳网站、CSSDA最佳UI、最佳UX、最佳创新和特别荣誉奖。作者强调在AI生成内容和销售优化模板的时代，应为人类真实性、意向性甚至错误留出空间。