问题标签 [scrollmagic]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 使用 jQuery 和 ScrollMagic 滚动动画时间轴
我目前拥有的
我正在使用 jQuery 和 ScrollMagic（使用 GSAP 插件）构建 HTML/CSS/JS 滚动时间轴。我有基本的时间线功能，当页面向下滚动时，时间线事件会产生动画。
我想补充的
我的问题是关于实现水平线的最佳方法，水平线从中心垂直线分支到每个时间线事件，因为它们淡入。理想情况下，水平线会像从中心线绘制一样动画，但淡入淡出可以工作也是。
我知道 ScrollMagic 具有绘制SVG 的能力，但我不确定是否有更有效的方法。例如，也许使用 HTML5 画布或仅使用简单的图像对这个应用程序更有意义。我的目标是保持页面响应，所以这是需要考虑的事情。
任何有关此主题的建议或演示将不胜感激。
当前“事件动画”的示例，它利用了 ScrollMagic 和 GSAP。我在时间轴上每年都有这样的代码块。这很可能是添加水平线动画的地方：
internet-explorer - 在 IE 和 EDGE 上使用 ScrollMagic 绘制 SVG 时的问题
使用 ScrollMagic 库绘制 SVG 时遇到一些问题：github.com/janpaepke/ScrollMagic
在此链接http://goo.gl/avrW9r，您可以看到在 Google Chrome、Firefox 和 Safari 中正确绘制的线条。
我的问题只在 Internet Explorer 和 Microsoft Edge 上。
你有什么想法来解决这个问题吗？
您可以在此处下载我的代码示例：https ://goo.gl/qj5FQC
gulp - 如何使用 Bower 在 scrollmagic 中包含“animation.gsap”
TL;DR有没有人能够使用 bower 安装 ScrollMagic + GSAP 动画？
我有一个具有完整根堆栈的网站（这意味着我正在使用 bower 进行前端依赖管理并使用 gulp 来构建网站。）并且我正在尝试在其上使用ScrollMagic动画。
其中一些动画具有 greensock 库作为先决条件。所以我bower.json有以下内容：
如果我运行 gulp 并浏览我的网站，我可以看到main.jsGreenSock中有引用
根据scrollmagic 文档，在我看来，我正在搜索“plugins/animation.gsap.js”，但是在阅读了ScrollMagic的官方文档之后......
选项 2：鲍尔
ScrollMagic 也可以在 bower 上使用，并且只会安装必要的源代码，而忽略所有示例和文档文件。请注意，由于它们不是核心依赖项，如果您选择使用它们，则必须手动添加 GSAP、jQuery 或 Velocity 等框架。
所以很明显，通过 bower 安装 GSAP 库就足够了。
此外，我不确定“gsap 插件”是否与“gsap 库”相同，但在bower 注册表中似乎没有其他更合适的了。
谢谢！
jquery - Scrollmagic时间线最大持续时间偏移
我有一个非常简单的 Scrollmagic 事件。它涉及部分擦除，如此处所述 - ScrollMagic Section Wipes Example。
因此，我将以下 ScrollMagic 设置放在一起。
所以基本上我所做的是创建一个 ScrollMagic 控制器，制作我的动画时间线，并设置我的场景。
它工作得很好，没有任何问题。但是，我试图围绕这些值中的一些值进行思考，以便我可以从菜单中创建一个 scrollTo 函数，该函数可以滚动到每个元素。
我已经接近工作了，但我似乎无法弄清楚以下内容；我的场景的持续时间400%意味着当我滚动时，#wrapper它被固定为相当于滚动过去元素（相对于我的触发器）的高度的 4 倍wrapper。
我明白，但我不明白的是在 TimelineMax 的每个元素中你有这个......
您可以将其全部分解，但1代表某种持续时间，我不确定。最后一个变量，在本例中为2表示其开始时间的偏移量。
这是我的问题，与持续时间相比，这些值代表什么。因为在这种情况下，我有 4 个动作，第一个动作从0开始，最后一个动作以4结束然而，持续时间点似乎并非如此，或者至少持续时间可能不是持续时间元素的计算方式。.elem10%50%elem4300%400%#wrapper
至少我需要弄清楚 TimelineMax 中的这些偏移量与持续时间之间的表示。
任何帮助将不胜感激。
javascript - 冲突库：Fullpage.js 和 ScrollMagic 问题
所以我正在制作一个包含不同部分的垂直视差滚动网站，我想在它们之间导航。所以我选择ScrollMagic了视差和fullpage.js导航。我fullpage.js CSS在标题中包含了文件。
问题是当我尝试同时拥有它们时。所以我在标签之间的<body>代码是
</body>在底部，我在关闭标签之前声明了我的 jquery 库
我想要平滑滚动到部分。也许还有其他方法。我绝对需要Scollmagic，因为我将绘制SVG's和制作其他需要触发器的动画
javascript - ScrollMagic：如何将内容放在视差背景之上
所以我在构建垂直视差滚动网站时遇到了问题。
目前我正在使用ScrollMagic创建视差部分，并且效果很好。当我尝试将内容放在上面时，问题就来了。对于我正在使用的情况Bootstrap's .container，我可以将我的内容放在不同的行、列等中。
我可以看到缺陷，它在结构本身，但我正在尝试找到一种方法来破解它，有什么想法吗？
所以如果我把我div的背景视差图像放在前面，它会重叠视差图像，并创建一个带有文本的白色容器。我已经完成了position absolute，但这意味着我不能使用bootstrap's grid.
div我尝试将视差背景放入其中。
我对想法持开放态度。
javascript - scrollmagic 没有响应触发元素
我对 ScrollMagic 有疑问。它在触发元素上根本没有响应。下面我将提供代码：
的CSS：
和JS：
我错过了什么？
javascript - Scrollmagic & GASP 如何重启动画
我正在制作一本书的动画。页面应该快速转动（就像我在动画中所做的那样），但我希望它们在 e 滚动回触发范围后回到起始位置。下面是js代码和codepen链接。
javascript - 如何在 GSAP 和 Webpack 中使用 ScrollMagic
为了将ScrollMagic 与 GSAP一起使用，您需要加载animation.gsap.js插件。使用 Webpack，你可以这样做（假设你使用 CommonJS 语法并使用 npm 安装所有东西）：
为了确保这确实有效，您必须为您的 Webpack 配置添加一个别名，以便 Webpack 知道插件所在的位置。
不幸的是，当您使用此配置和上面的 CommonJS 语法时，ScrollMagic 不断抛出错误。
jquery - gasp 没有在 safari 上工作
任何人都可以帮助我为什么这在 safari 上不起作用？它在 chrome 上效果很好。js脚本也适用于firefox，但有一些svg问题没有出现在正确的位置，但这是另一个问题......在调试器选项卡的safari中，我得到了这个：
http://codepen.io/Separator/pen/dGEdeP
下面是我使用 GASP 的 js 代码