使用GSAP设置SVG滚动动画

GSAP有一个插件，可以触发滚动动画，我想用它

我已经得到了一个正常工作的SVG动画（没有GSAP）：

要使用ScrollTrigger，是否必须在GSAP中设置此SVG的动画

视情况而定。如果您只想启动一个动画（SMIL动画、CSS动画、GSAP动画等等），您可以使用ScrollTrigger回调来完成

如果您想在动画中拖动，在GSAP中制作动画可能是有意义的，因为它更容易更新。顺便说一句，你不能像使用GSAP那样让SMIL动画转到特定的进度点

话虽如此，几乎所有制作SVG动画的人都会定期推荐在大多数情况下使用JS制作SVG动画（更多信息）

为什么在GSAP代码中会出现这种颜色渐变

如果使用开发工具查看GSAP版本的SVG，您可以看到它正在设置

stopOpacity

属性的动画，而不是

stopOpacity

属性的动画。在引号中使用常规属性名（即非驼峰大小写）可以修复该问题

如何使用GSAP获得原始动画结果

我会利用设置像这样的东西：