练习动画最好的方式：用GSAP实现可滚动和可拖动的时间轴

Greensock 动画库的 ScrollTrigger 和 Draggable 插件可以帮助我们创建一些非常酷的响应用户交互的效果。在本教程中，我们将了解如何将它们一起使用，以创建一个可滚动和可拖动的交互式时间轴。

我们将建立一个时间轴，显示周董的发行的专辑。我们时间轴的主题并不重要——主要是在多个日期发生的一系列事件——所以随意选择你自己的主题，让它对你来说更个性化！

我们的网页顶部有一个时间轴，显示我们的日期，以及一些全角部分，我们每个日期的内容都将在其中存在。拖动水平时间轴应该将页面滚动到内容中的适当位置，同样滚动页面会导致我们的时间轴更新。此外，单击时间轴中的任何链接将允许用户直接跳转到相关部分。这意味着我们有三种不同的方法来导航我们的页面——它们都必须相互完美同步。

我们将逐步完成创建时间轴的步骤。

HTML

由于这将是我们的主页面，我将使用 <nav> 元素。在其中，我们有一个marker，我们将使用 CSS 设置样式以指示时间轴上的位置。我们还有一个带有 nav__track 类的 <div>，这将是我们的可拖动触发器。它包含我们的导航链接列表。

<nav>
	<!--Shows our position on the timeline-->
	<div class="marker"></div>
	
	<!--Draggable element-->
	<div class="nav__track" data-draggable>
		<ul class="nav__list">
			<li>
				<a href="#section_1" class="nav__link" data-link><span>2000</span></a>
			</li>
			<li>
				<a href="#section_2" class="nav__link" data-link><span>2001</span></a>
			</li>
			<li>
				<a href="#section_3" class="nav__link" data-link><span>2002</span></a>
			</li>
			<!--More list items go here-->
		</ul>
	</div>
</nav>

在我们的导航下方，我们有页面的主要内容，其中包括许多部分。我们将为每一个部分分配一个与导航中的链接之一相对应的 id。这样，当用户单击链接时，他们将滚动到内容中的相关位置——无需 JS。

我们还将为每个部分设置一个与该部分索引相对应的自定义属性。这是可选的，但对样式很有用。我们暂时不用担心我们部分的内容。

<main>
	<section id="section_1" style="--i: 0"></section>
	<section id="section_2" style="--i: 1"></section>
	<section id="section_3" style="--i: 2"></section>
	<!--……-->
</main>

CSS

接下来我们将进入我们的基本布局。我们将给每个部分的最小高度为 100vh。我们还可以给它们一个背景颜色，以便在我们滚动浏览这些部分时使其明显。我们可以使用我们在上一步中设置的自定义属性与 hsl() 颜色函数相结合，为每个颜色函数赋予一个独特的色调：

section {
	--h: calc(var(--i) * 30);
	
	min-height: 100vh;
	background-color: hsl(var(--h, 0) 75% 50%);
}

我们将把我们的导航定位在页面的顶部，并给它一个固定的位置。

nav {
	position: fixed;
	top: 0;
	left: 0;