Question

我有一个使用ScrollMagic设置的时间轴和场景，以及在页面加载时触发的50％的时间，而不是我设置触发器在特定div上启动的位置。

我的代码：

jQuery(document).ready(function($){
   // init ScrollMagic Controller.
    var controller = new ScrollMagic.Controller();
    var fadeAnim;
   // Animation 1
    fadeAnim = function() {
        var timeline = new TimelineMax();
        tl1.to('#animateThis1', 1,{ opacity: 1, marginTop: '0%', ease: Power1.easeOut},1)
        .to('#animateThis2', 1,{ opacity: 1, marginTop: '3%', ease: Power1.easeOut}, 1.5)
    }
    new ScrollMagic.Scene({triggerElement: "#trigger", offset: -300})
    .setTween(fadeAnim)
    .addTo(controller);

现在令人沮丧的是，它有时会起作用，然后在页面加载完成时开始，所以当我滚动到#trigger时动画已经完成。其他时候它按预期工作。

我不确定是否遗漏了某些内容，我在谷歌搜索过，我的代码与所需内容类似。

感谢。

Answer 1

您的代码似乎添加了一个偏移量。检查一下。尝试使用Scene中的调试选项或尝试使用addInticator插件进行调试

尝试为其他人提供codepen或plunker来检查问题。根据您当前的问题提供解决方案很难

Answer 2

我遇到了类似问题，原因是ScrollMagic和jquery版本之间存在冲突。

对我来说，使用任何版本的ScrollMagic！= 1.3.0会导致您描述的错误。

尝试使用1.3.0是值得的，例如

https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/1.3.0/jquery.scrollmagic.js

为什么ScrollMagic会在页面加载时触发？

2 个答案: