我正在玩Scrollmagic，想在这里使用效果:http://scrollmagic.io/examples/advanced/svg_drawing.html我创建了一个squigglesvg来测试它，需要将路径的长度插入到stroke-dasharray:2000px;笔划-dashoffset:2000px；如何找到路径的长度？ functionpathPrepare($el){ varlineLength=$el[0].getTotalLength(); $el.css("stroke-dasharray",lineLength); $el.css("stroke-da

我有一个固定的slider，当您通过更新内部包装器的X值到达它时，它会水平移动。这部分效果很好。但是，对于每张单独的幻灯片，我希望文本具有视差效果(滚动时速度变慢-相对于当前幻灯片)。这是我设置的一个小型(简化)测试用例:https://codepen.io/michaelpumo/pen/EJgWgd不幸的是，出于某种原因，文本似乎交错并且动画不流畅。这可能是我误解了ScrollMagic的API(它对我来说是新的)。我有2个Controller，因为获得“视差”部分的唯一方法是将第二个Controller设置为vertical:false。也许与此有关？非常感谢您的帮助!JavaS

为了使用ScrollMagicwithGSAP，你需要加载animation.gsap.js插件。使用Webpack，您可以执行类似这样的操作来完成此操作(假设您使用CommonJS语法并使用npm安装所有内容):varTweenMax=require('gsap');varScrollMagic=require('scrollmagic');require('ScrollMagicGSAP');为确保这确实有效，您必须向Webpack配置添加一个别名，以便Webpack知道插件所在的位置。resolve:{alias:{'ScrollMagicGSAP':'scrollmagic/s

我想实现一个动画来淡入我的应用程序中的部分，例如thisexample中的部分。因此，我查看了fullPage.js。但是，由于我需要将它集成到具有服务器端渲染的Next.jsReact应用程序中，我无法使用它，因为它依赖于不支持SSR的jQuery。因此，我用ScrollMagic试试运气，它不依赖于jQuery。但它也不支持SSR(需要window)，因此我在componentDidMount()方法中对其进行了初始化，甚至将其加载到那里(就像推荐的那样here).目前它最初可以工作，但是一旦您更改页面并且完成AJAX请求并且Next.js替换页面，就会抛出错误(见下文):Node

使用以下代码，我能够使该位置动画化并淡入文本。但是我想完成的是移动，淡入，淡入，接着在滚动结束时淡入所有复制回到0。因此，移动正常。我只想要同样的标签逐渐消失，然后在滚动结束时退出。//initcontrollertoholdallcommands/animationsconstcontroller=newScrollMagic.Controller({addIndicators:true});consttween1=TweenMax.staggerTo('#parallaxp',1,{bottom:$('#parallax').height(),opacity:1,},0.06);//All