受团队信任
设置After Effects动画，使其在滚动到视图时产生动画效果。
作为我们系列的一部分After Effects和Lottie在Webflow我们在After Effects中制作了一个小纸盒。在本教程中，我们将设置框在web上动画，当它滚动到视图时打开，当它滚动出视图时关闭。
我们将分3步完成:
你需要从After Effects中导出Lottie动画并上传到你的Webflow项目中。我们用Bodymovin．在我们的第3步和第4步中学习如何做到这一点全面介绍教程．
对于这个项目，您需要设置两个部分-查看我们的节教程或克隆项目．
要查找并添加动画，单击左侧工具栏中的Assets面板中的照片图标，并将该框拖到两个部分之间的Canvas上。
因为每个部分都是视口的高度，所以让我们把纸板箱的尺寸定得非常小(大约100像素)。
步骤1完成了!我们来设置触发器。
在添加触发器之前，我们要确保动画(而不是其他元素)被选中。
我们希望在选定的元素(Lottie动画，即方框)滚动进入视图时触发动画。从右边工具栏上的interaction面板中，打开Element触发器菜单并选择Scroll into view。
停留在交互面板中，在我们的最后一步设置动画。
当我们选择的元素滚动到视图中时，我们希望Lottie动画开始。
当滚动到视图下的交互面板，从操作菜单中选择Lottie Playback。
如果我们滚动到页面顶部并点击预览(左上角的眼睛)，你会看到纸板箱在滚动到视图中时动画打开——就像我们预期的那样。但如果我们向上再向下滚动，盒子仍然是打开的。
因此，我们接下来要做的是设置Lottie动画，使其在框滚动回视图之外时发生和反转(以便框动画返回关闭状态)。要做到这一点，在当滚动出视图下的交互面板上，从操作菜单中选择Lottie Playback。若要将方框动画还原为关闭状态，请选择Reverse。
在所有这些艰苦的工作之后，我们想要确保这个动画没有被错过-让我们添加一个偏移量，以便动画在到达页面上的某个点之前不会被触发。当您仍然在交互面板中，为两者添加10%的偏移量当滚动到视图而且当滚动出视图时．
现在，当你点击预览，从顶部开始，滚动一点，你会看到盒子是关闭的，直到它到达10%的标记，当它动画打开。如果我们滚动回它在视外的地方，当它离视外有10%的距离时，动画会反向播放，就像我们告诉它的那样。去美国!
我们添加了一个Lottie动画，选择了基于滚动的触发器，并设置了两个动画:一个是滚动到视图时的动画，另一个是滚动出视图时的动画。这意味着您刚刚成功地设置了一个元素，使其在滚动进入和退出视图时产生动画效果。
大家来击掌吧!
