24 个动画网站示例评测：解析技术栈、页面重量与动效实现

最好的动画网站会利用动态效果来讲解某些内容：随着滚动而旋转的产品、会作出反应的光标，以及像场景一样变化的页面。 这 24 个网站来自工作室、产品与品牌网站、个人作品集和小型企业；我们还为每一家列出了在其代码中发现的动画库；至于动效设计师自己的作品集，请参阅我们的动效设计作品集。

我们加载了 68 个网站，其中包括此前版本清单中的全部 20 个网站，并阅读每个网站下载的脚本，以确定其平台和动画技术栈（GSAP、three.js、Lottie、Rive 等）。我们还测量了页面权重，并测试了当访问者请求减少动态效果时，动效是否会停止。在旧条目中，有两个已无法加载，两个如今已变成不同的企业，十三个入选。

1. Lusion

构建于：Astro、three.js、SplitType

Lusion 的主页是一个单一的 3D 场景，而非图库：在圆角面板内，光滑的蓝色、白色和黑色连接件缓缓翻滚，下方写着“我们打造 3D 视觉叙事与交互式网页体验，帮助品牌脱颖而出”。这家工作室销售 3D 作品，因此首屏就是 3D。

该场景在 Astro 网站中通过 three.js 运行，加载时会播放一条简短的进度条。标题使用 SplitType 拆分为单个字母，因此每个字母都能单独制作动画。

亮点：首屏就是提案核心：一个实时 3D 场景，而非样片合集。

2. Apple AirPods Pro

构建于：自定义代码（Apple）、视频、three.js

Apple 的 AirPods Pro 页面是滚动驱动式产品叙事的标杆。首屏影片让耳机在光线中转动，“Get the highlights”播放一组短片轮播；再往下，特写视图和降噪环会随滚动位置移动，而不是按时间自动播放。

页面大部分内容都是视频，共有 16 个视频元素，只有一个效果使用 three.js，而非采用重型 3D 引擎。开启减少动态效果后，首屏会显示静态图片，滚动区块则直接出现。

亮点：滚动联动叙事，并能在减少动态效果模式下自动关闭。

3. Igloo Inc.

构建于：自定义（Vite）、three.js、GSAP

Igloo Inc. 开头是一座由冰块搭成的冰屋，坐落在雪山上；观看时，冰块会升起并重新落下。滚动时，镜头飞入漂浮的冰立方体，每个冰立方体中都承载着公司旗下的一家作品集企业，首先是 Pudgy Penguins。

该工作室的 abeto 会在浏览器控制台中标记构建成果，网站采用 three.js 和 GSAP 运行。问题在于，每个字都绘制在 canvas 内，因此页面没有可供搜索引擎或屏幕阅读器读取的 HTML 文本；我们首次八秒内共传输了 14.4 MB。

亮点：兼具导航功能的 3D 场景。

4. darkroom.engineering

构建于：Next.js、Lenis、GSAP、ScrollTrigger

darkroom.engineering 是 Lenis 背后的工作室；这份清单中还有另外四个网站使用这款平滑滚动库。其官网也展示了这种风格：红色像素字体写着 WHERE THINGS GET DEVELOPED，置于密集的霓虹场景之上，项目则以全屏图像从眼前滚过。

它也是这里最轻量的页面之一，我们首次八秒内仅加载了 0.65 MB。Work 页面开头将标语沿屏幕纵向反复排列；开启减少动态效果后，平滑滚动会关闭，页面立即移动。

亮点： Lenis 的开发团队，页面总重不到 1 MB。

5. Graza

使用技术：Shopify、GSAP、ScrollTrigger、Lottie

橄榄油品牌 Graza 利用动态效果展现个性：在视频主视觉之后，手绘的带脸橄榄缓缓浮现，并配以“Olive oil so fresh, you can taste it.”，随后一滴油落下；滚动时，简短的故事画板会保持固定。

键盘用户首先触达的是“暂停动画”控件，页脚中也重复提供了该控件。网站还会遵循系统的减少动态效果设置；在我们的测试中，主视觉影片因此停止播放。代价是页面重量：首页在八秒内加载了 71.2 MB，其中大部分是视频。

亮点： 可控制所有动态效果的暂停按钮，从第一次按键起便可触达。

6. Lando Norris

使用技术：Webflow、GSAP、ScrollTrigger、SplitText、three.js、Rive、Lenis、Taxi.js

由 OFF+BRAND 工作室打造的 Lando Norris 网站从第一屏起就由滚动驱动：图形划过他的肖像，照片碎裂成像素，霓虹签名在滚动标题上绘制而成，醒目的色块则掠过其使命宣言中的文字。

这是一个 Webflow 网站，顶部叠加了一个大型自定义脚本：GSAP 配合 ScrollTrigger 和 SplitText、three.js、Rive 运行时、Lenis 平滑滚动，以及用于页面切换的 Taxi.js。Calendar 页面还为下一场比赛加入了赛道可视化效果。

亮点： 每一步滚动都会改变所见内容。

7. Stripe

使用技术：Next.js、WebGL、three.js、Framer Motion

Stripe 将动态效果置于信息之后：橙色、粉色和紫色的丝带在标题背后的 WebGL 画布上缓缓流动，上方的小型计数器“Global GDP running on Stripe”会随着阅读一路递增至小数点后第八位。

再往下，由光线构成的地球图展示了“The backbone of global commerce”。页面在最初八秒内传输了 2.1 MB；开启减少动态效果后，渐变保持静止，CSS 过渡也会关闭。

亮点： 动态效果营造氛围，却不会与文案争夺注意力。

8. 1Minus1

使用技术：Nuxt、GSAP、ScrollTrigger、SplitText、Flip、three.js、Lenis

面向电子游戏公司的代理机构 1Minus1 像游戏一样开场：HOLD TIGHT, ALMOST READY 计数器运行至 100，随后像素字体标题 DISTINCT ALWAYS 出现在一张 WebGL 卡片上，卡片不断切换游戏主视觉。

技术栈是基于 Nuxt 的 GSAP，配合 ScrollTrigger、SplitText 和 Flip，并加入 three.js 与 Lenis。与 darkroom.engineering 一样，该网站会尊重减少动态效果设置：开启此设置后，主视觉效果会停止，因为当 reduce 查询匹配时，代码会跳过时间轴。

亮点： 加载器和标题仿佛游戏的开场画面。

9. Bruno Simon

使用技术：Custom (Vite)、three.js、GSAP

Bruno Simon 的作品集本身就是一款游戏：发光圆环加载完成后，会出现一座 3D 岛屿，上面有玩具卡车、树木和“Click to start”提示；你可以驾驶车辆环游世界，寻找他的项目和链接。这个网站本身就是作品。

它采用 Vite 构建，在 three.js 中结合 GSAP 运行，页面可在鼠标与键盘模式及游戏手柄模式之间切换。加载时需要稍等：最初八秒内加载了 5.5 MB。

亮点： 这是一款供你驾驶的游戏，而不是供你阅读的页面。

10. Hello Monday

使用技术：Custom code、PixiJS、GSAP、MorphSVG

你好，星期一是一家位于纽约、哥本哈根和奥胡斯的创意工作室。开场是两个线条绘制的角色，每当下方的文字在“Branding”、“Experiences”和“Products”之间切换时，他们就会更换服装并摆出不同姿势。它无需一整段文案，就将这三项服务解释清楚。

这些绘图使用 PixiJS、GSAP 及其 MorphSVG 插件运行，角落里的一个小计数器会告诉你距离星期一还有多少天。下方案例研究还使用了视频，视频占页面八秒加载的 12.6 MB 中的大部分。

亮点：插画让人一眼就能理解三项服务。

11. Dogstudio

技术栈：WordPress、three.js、GSAP、Highway.js

Dogstudio 的主页开场是一只被深蓝色灯光照亮的 3D 狗，旁边是工作室的标语。向下滚动，页面会变成项目列表，其中包括 Tomorrowland、MSI Chicago 和 Royal Opera of Wallonia；每当切换到一个标题，狗的颜色和背景场景都会随之改变：Tomorrowland 是金色，歌剧院则是深红色。

这只狗是一个采用 Draco 压缩的 glTF 模型，由 three.js 渲染；GSAP 负责补间动画，Highway.js 则无需整页重新加载即可切换页面，全部基于 WordPress。由于每个项目都会重新设计同一个场景，这份列表看起来像是一个连续的空间。

亮点：每个标题都会为 3D 场景重新设计样式的项目列表。

12. Rive

技术栈：Framer、Rive、Framer Motion

Rive 开发了一款交互式动画工具，其官网也使用这款工具：页面上的图标和按钮都是实时播放的 Rive 文件（Framer 组件名为“Framer site icons.riv”和 button_simple.riv），旁边还有一列用例卡片，涵盖汽车、游戏 UI、移动应用和电影。

布局采用 Framer，滚动和出现效果也由其内置动画库处理。对于任何产出内容为动画的产品来说，这都是一个很好的范例：在自己的网站上使用这款产品。

亮点：产品本身的动画驱动着网站按钮和图标。

13. Castor & Pollux

技术栈：SvelteKit、GSAP、Lottie、Lenis

Castor & Pollux 是一家位于蒙特勒伊的数字代理公司，它用一只小眼睛取代了标准鼠标指针，瞳孔会跟随指针移动。这个细节虽小，却让每次悬停都显得生动有趣，也很契合该代理公司俏皮的文案。

滚动时，项目图像会以拼贴形式进入画面，并将“stratégie”、“créativité”和“technologie”这几个词推开。这个 SvelteKit 网站在页面过渡代码块中加载 GSAP，同时使用一段 Lottie 动画和 Lenis 实现平滑滚动，并列出了 Deezer、WWF、La Poste 和 Engie 等客户。

亮点：一个拥有个性的鼠标指针。

14. Active Theory

技术栈：自定义代码、自定义 WebGL、Theatre.js

Active Theory 开发游戏、装置和 WebGL 体验，其官网的行为也如同游戏：一个发光的圆环标志漂浮在飘动的粒子之上，“Work”菜单列出 Secret Sky、Discover your Patronus 和 20 Years of Xbox 等项目，并可按游戏、多人游戏、XR / VR / AI、装置和网站筛选。

所有内容均由该工作室自己的 WebGL 代码渲染，并使用 Theatre.js 进行时序编排。它也会为性能较弱的浏览器做好适配：我们的无头测试浏览器会进入“Not Supported”页面，而不是显示损坏的场景；桌面版 Chrome 则能运行完整个网站。

亮点：为无法运行网站的浏览器提供清晰的备用页面。

15. Eszter Bial

技术栈：自定义 HTML、GSAP、ScrollTrigger、Lenis

布达佩斯的 UX/UI 与品牌设计师 Eszter Bial 用动态字体打造个人作品集：“UX/UI brand DESIGNER”以超大压缩字体呈现在一个线条笑脸图案上，文案分成大块向上滚动，接近页面末尾处还有一条持续滚动的联系方式跑马灯。

光标标签会随版块变化，从查看作品切换到联系；页面之间切换时还会显示从 0% 到 100% 的计数器。它采用纯 HTML，并从公共 CDN 加载 GSAP、ScrollTrigger 和 Lenis，展示了一个人制作的网站在不使用框架的情况下可以承载多少动态效果。

最引人注目的是： 大胆而自信的字体承担了大部分动画效果。

16. Duolingo

技术构成： 定制代码、Rive、Lottie

Duolingo 的主页像应用一样使用其角色：在首屏中，一众角色围绕猫头鹰 Duo 聚集并轻柔移动；下方每个版块（免费。乐趣。有效。保持动力。个性化学习）则在滚动进入视野时呈现各自的插画。

应用代码随附用于课程动画的 Rive 文件，并使用 lottie-web 承载较轻量的动画。角色就是品牌，因此动作短小而亲切，而非电影感；在我们的测试中，开启减少动态效果后，首屏插画会静止不动。

最引人注目的是： 访客要求停下时，吉祥物动画也会停止。

17. Les Animals

技术构成： WordPress、GSAP、ScrollTrigger、ScrollSmoother、SplitText、MorphSVG、PixiJS、Matter.js

里昂数字代理公司 Les Animals 有意让首屏几乎保持静止：“稍有不同的数字代理公司”这句话置于绘制在全屏画布上的缓慢烟雾蓝色波浪之上，随着滚动，下方的陈述文字逐行显现。

底层是这份榜单中最丰富的技术栈之一，基于 WordPress：GSAP 配合 ScrollTrigger、ScrollSmoother、SplitText 和 MorphSVG，另有 PixiJS 与 Matter.js 物理引擎。尽管如此，其主页在八秒内仅传输了 1.0 MB。

最引人注目的是： 部署在 WordPress 上的丰富动画技术栈，页面加载依然轻巧。

18. Verholy Relax Park

技术构成： Nuxt、GSAP、ScrollTrigger

Verholy Relax Park 是一家提供英语和乌克兰语版本的森林水疗酒店，利用动效让节奏慢下来：随着滚动，照片上 VERHOLY RELAX PARK 的字母缓缓散开，随后“Nature is not a place to visit. It is home.”在深绿色背景上淡入。

客房、餐饮和活动以错位的照片面板呈现，并配有自定义光标。这是一个基于 Nuxt、结合 GSAP 与 ScrollTrigger 打造的小型企业网站，动画始终服务于摄影内容。

最引人注目的是： 滚动节奏与悠闲周末度假的体验相契合。

19. Louis Ansa

技术构成： Nuxt、three.js、Lottie、anime.js

拥有 12 年以上经验的自由职业创意总监兼多学科设计师 Louis Ansa，让精选作品自行演绎：先是 Mojo 视频模板网格，然后是 Ism 标志的自我绘制，接着是下一个项目，每个项目从 SW.001 到 SW.007 均有编号。

他的这句话“I tell stories through design, interactivity and animation”得到了技术栈的支持，包括 Nuxt 上的 three.js、Lottie 和 anime.js，以及自定义光标。自动播放的预览均为视频，因此该页面在八秒内达到了 16.6 MB。

最引人注目的是： 作品集以一个接一个的项目自动展示自身。

20. OLIPOP

技术构成： Shopify、GSAP、Barba.js

OLIPOP 这款益生元汽水品牌让动效紧贴产品：焦糖滴落形状框住焦糖苹果主视觉，旁边是一段苹果裹上焦糖的短片；滚动页面时，罐装产品会按膳食纤维含量标签依次滑入，随后进入“Why OLIPOP?”面板。

该 Shopify 主题加载了 GSAP，并引入了用于动画页面切换的 Barba.js 库。你会看到一个 Cookie 栏，接受后还会弹出折扣窗口；主视觉本身则保持简洁易读。

亮点：产品影片与包装风格的图形，动效处理保持简洁。

21. Waaark

使用技术：WordPress、GSAP (TweenMax)、SplitText、Lottie (Bodymovin)

Waaark 是一家由两人组成的法国网页工作室，其首页内容全部容纳在一屏之内：作品、愿景与工作室分别对应三个面板，每个面板都配有等距插画。动效被留到页面切换时使用，液态粉色与蓝色形状横扫屏幕，一个巨大的 W 在标题后方构建，文字则逐行显现。

技术栈采用较早期的 GSAP (TweenMax)，搭配 SplitText 和 Bodymovin 播放器，并基于 WordPress 构建；这里的首页也是最轻量的，仅 0.4 MB，耗时八秒。吸引力并不需要 WebGL。

亮点：让一次点击仿若一场盛大事件的页面转场。

22. Brain Bakery

使用技术：Webflow、Webflow Interactions、Lottie、Swiper

Brain Bakery 是荷兰 Jisp 的一家培训公司，展示了小型企业也可以拥有充满活力的网站。标题第二行采用空心描边样式，置于实心第一行下方；滚动时，各版块会以深绿色和奶油色的撕纸笔刷形状出现，并逐渐扩大、滑入到位。

整个网站由 Webflow Interactions（113 个动画元素）、两个 Lottie 文件和一个 Swiper 轮播组成，没有自定义代码。顶部栏始终展示 Google Reviews 的 53 条评价和地址等实用信息。

亮点：无代码构建器打造的趣味手作感动效。

23. Chartipedia

使用技术：Vev、anime.js

Chartipedia 是一家数据可视化工作室，它将自己的品牌名称融入动画之中：在“A chart speaks more than a thousand words.”下方，几何字形以明亮的色彩组成跑马灯，横穿主视觉区域。

滚动页面时，会出现介绍数据叙事、滚动叙事和数据新闻的卡片，每张卡片都置于各自的图像之上。网站使用无代码构建器 Vev 构建，其运行时自带 anime.js，并提供位于 /cn/ 的中文版本。

亮点：通过动态 movement 解释业务的标志。

24. Resn

使用技术：自定义代码、three.js、GSAP

Resn 的首页只保留一个对象：一块多面玻璃碎片在黑暗中围绕工作室名称缓缓旋转。页面上没有作品网格，也没有需要阅读的标题，只有这块碎片和一个菜单。

网站采用自定义代码，结合 three.js 和较早期的 GSAP 构建；这是这里最沉重的页面之一，耗时八秒加载 24.6 MB，其中图片占 13.4 MB。首屏的克制正是重点：一个光线充足的物体，胜过满墙的缩略图。

亮点：以一个光线恰到好处的物体，取代繁忙的网格。

什么是优秀的动画网站？

动效应用于解释，而非装饰。这里最出色的动效都承载着信息。Hello Monday 的角色通过换装来展示其三项服务，Chartipedia 的标志则将名称变为图表形状。如果你无法说明动画向访者传达了什么，就删掉它。

让滚动带动叙事。 将动画与滚动位置关联，让读者自行掌握节奏。Apple 的 AirPods Pro 页面会让特写画面和降噪控制环随滚动移动，Lando Norris 的网站每一步都会发生变化，Dogstudio 则会为作品列表中的每个项目重新设计其 3D 狗。保持每一步简短，让快速浏览的人也能理解重点。

保持快速。 动画库通常并不是最耗资源的部分：在这 24 个网站中的 23 个，所有 JavaScript 加起来在我们的测试中都不超过 3 MB；真正让 Graza 和 Resn 超过 20 MB 的是媒体资源。darkroom.engineering 在最初 8 秒内传输了 0.65 MB，Waaark 传输了 0.4 MB；Graza 加载了 71.2 MB，其中大部分是视频。请压缩视频、对首屏以下的场景实行延迟加载，并在手机网络下进行测试。

尊重 prefers-reduced-motion。 有些访客会因动态效果而头晕或分心，因此在系统设置中将其关闭。我们测试这里的每个网站时都启用了该设置：Apple 的 AirPods Pro 页面会把主视觉影片替换为静态图像，Stripe 的渐变保持静止，darkroom.engineering 和 1Minus1 取消平滑滚动及主视觉特效，Duolingo 的插画也会停止动画。Graza 还提供了“暂停动画”控件。其他大多数网站启用该设置后看起来并无变化。

把微交互放在手边。 光标和按钮是塑造个性的最低成本方式。Castor & Pollux 会把光标变成一只跟随你的眼睛，Eszter Bial 的光标标签会随版块变化，Rive 的图标和按钮则是实时动画文件。保持这些交互小巧、快速，并在所有可点击元素上保留常规指针。

使用页面转场保持上下文。 能遮掩页面切换的转场会让网站感觉像一个连续的整体。Waaark 会让液体形状掠过屏幕，并在每个标题后方构建一个巨大字母；Dogstudio 和 Lando Norris 切换页面时无需完整重载；Eszter Bial 则会在页面之间运行一个简短计数器。转场应控制在一两秒内；时间再长就会让人感觉像是在等待加载。

仅在 3D 和 WebGL 物有所值时使用。 当 3D 本身就是产品或宣传内容时，这样做才划算：Lusion 销售 3D 作品，Bruno Simon 的作品集是一款游戏，Igloo Inc. 则用冰块作为导航。但 Igloo 的文字只存在于 canvas 内部，因此没有可供阅读或索引的 HTML 文本，而且每个 WebGL 网站都需要像 Active Theory 那样的“Unsupported”备用页面。

不要用加载页挡住内容。 在 3D 场景下载时显示一条简短进度条是合理的，例如 Lusion、1Minus1 和 Igloo Inc.，但文字也应随之一起出现。我们查看的多个网站把全部内容都放在“Start”或“Enter”点击之后，而这些网站没有一个入选。先用 HTML 呈现标题，再让场景在后方加载。

常见问题

动画网站使用哪些动画库？

GSAP 最常见：这里的 24 个网站中有 15 个加载了它，通常还会搭配 ScrollTrigger 来实现滚动效果。three.js 出现在 10 个网站上，通常用于 WebGL 场景；Lottie 有 6 个，Rive 有 3 个。平滑滚动大多来自 Lenis（5 个网站），Webflow 网站则会添加 Webflow Interactions。少数网站，如 Waaark，仍在运行旧版 GSAP，但也没有问题。

我应该使用 GSAP 还是 CSS 动画？

对于简单的悬停状态、淡入淡出和过渡效果，请使用 CSS：它内置于浏览器中，零加载成本。当你需要时间轴、滚动关联序列或将文本拆分成多行时，可以使用 GSAP，就像 Les Animals 和 1Minus1 所做的那样。GSAP 及其插件可免费使用，因此选择取决于动画编排的复杂程度。

动画会损害 SEO 或页面速度吗？

可能会，但通常问题源于庞大的媒体文件，而不是代码。这里大多数网站加载的 JavaScript 都不到 3 MB，而视频和图片让其中两个页面超过了 20 MB。请让标题和文案保留在 HTML 中，而不要只放在 canvas 里；对场景和视频进行延迟加载；添加动效后再检查 Core Web Vitals。

什么是 prefers-reduced-motion？

这是一项操作系统设置，用于告知网站访客希望减少动态效果，通常是因为动画会让他们感到眩晕。网站会通过 CSS 媒体查询或 JavaScript 读取该设置，然后减弱或跳过其效果。在我们的测试中，开启该设置后，Apple、Stripe、Duolingo、Graza、darkroom.engineering 和 1Minus1 都降低了动态效果。

我可以在 Webflow 或 WordPress 中构建动画网站吗？

可以。Webflow 内置了交互功能，Brain Bakery 无需自定义代码即可使用；Lando Norris 的网站则在 Webflow 基础上添加了 GSAP 和 three.js。在 WordPress 中，Les Animals、Waaark 和 Dogstudio 会从主题中加载 GSAP、PixiJS 或 three.js。当内置工具不够用时，这两个平台都允许你添加自己的脚本。

网站动画应该使用 Lottie 还是视频？

对于扁平插画和图标，请使用 Lottie：文件小、采用矢量格式，并且在任何尺寸下都很清晰，这就是 Waaark 和 Brain Bakery 使用它的原因。对于实拍或渲染的视频素材，请使用视频，例如 Apple 的产品影片。Rive 是一种较新的矢量动画方案，可以对输入作出反应，如 Rive 自己的网站和 Duolingo 所示。

总结

想了解更多网页动效，请查看我们的 SVG 动画示例和 Webflow 网站示例。想了解这些动效背后的创作者，请浏览我们的动态设计作品集和最佳作品集网站示例。准备好构建自己的网站了吗？从我们的网站模板之一开始。

这篇文章有帮助吗？

是否