使用GSAP构建响应式、滚动触发的曲线路径动画
One of the hero designs we came up with for Formula 1 driver Lando Norris’s new website had an interesting challenge: animating an element along a smooth curved path between multiple fixed positions, one that would work across any device size. While GSAP’s MotionPath plugin makes path-based animation straightforward, we needed something more dynamic. We needed a system that could recalculate its curves responsively, adapt to different layouts, and give us precise control over the path’s shape during development.
我们为一级方程式车手Lando Norris的新网站设计的一个英雄设计面临一个有趣的挑战：在多个固定位置之间沿着平滑的曲线路径动画化一个元素，这个路径能够适应任何设备大小。虽然GSAP的MotionPath插件使基于路径的动画变得简单，但我们需要更动态的东西。我们需要一个能够响应性地重新计算其曲线、适应不同布局，并在开发过程中精确控制路径形状的系统。
In this tutorial, we’ll walk through building a scroll-triggered curved path animation with a visual configurator tool that lets you dial in the perfect curve by dragging control points in real-time.
在本教程中，我们将通过构建一个滚动触发的曲线路径动画来进行讲解，使用一个可视化配置工具，让您通过实时拖动控制点来调整完美的曲线。
Tools Used:
使用的工具：
The concept was simple: as users scroll, an element should travel smoothly along a curved path between three specific positions on the page, changing size as it moves. The tricky part? Each position had different dimensions, the path needed to feel natural and smooth, and everything had to recalculate perfectly when the browser window resized.
这个概念很简单：当用户滚动时，一个元素应该在页面上三个特定位置之间沿着曲线路径平滑移动，并在移动时改变大小。棘手的部分？每个位置的尺寸不同，路径需要感觉自然和平滑，并且在浏览器窗口调整大小时一切都必须完美重新计算。
Static SVG paths wouldn’t cut it. They’d break on different screen sizes and couldn’t adapt to our responsive layout. We needed curves that were calculated dynamically based on actual element positions.
静态 SVG 路径无法满足需求。它们在不同屏幕尺寸下会失效，无法适应我们的响应式布局。我们需要根据实际元素位置动态计算的曲线。
Before diving into code, let’s quickly cover the foundation: cubic Bezier curves. These curves are defined by four points:
在深入代码之前，让我们快速介绍基础知识：三次贝塞尔曲线。这些曲线由四个点定义：
- Start point (anchor)
- 起始点（锚点）
- First control point (CP1) – “pulls” the curve away from the start
- 第一个控制点 (CP1) – “拉动”曲线远离起点
- Second control point (...