Javascript 如何附加此超级动画时间线

我正试图用超级动画制作一把枪。这个想法是当用户向下滚动时，枪就会开火。这涉及到一些相当复杂的粗花呢

以下是我到目前为止的成果（*在Firefox中效果最好）：

现在我已经扳动了扳机，锤子向后旋转，我需要让锤子在达到旋转-25后捕捉到旋转：0。我只是不知道如何附加这个时间线

这是我的剧本：

<script>
    $(document).ready(function() {
        var controller = $.superscrollorama();

        controller.addTween(
            '#gun',
            (new TimelineLite())
                .append([
                    TweenMax.fromTo($('#hammer'), 1, 
                        {css:{rotation: 0}, immediateRender:true}, 
                        {css:{rotation: -25}, ease:Quad.easeInOut}),
                    TweenMax.fromTo($('#trigger'), 1, 
                        {css:{rotation: 0}, immediateRender:true}, 
                        {css:{rotation: 40}, ease:Quad.easeInOut})
                    ]),
                    500, // scroll duration of tween
                    200); // offset?
    });
</script>

$（文档）.ready（函数（）{
变量控制器=$.superscrolloma（）；
控制器。addTween(
"枪",，
（新的TimeLineite（））
.附加([
TweenMax.fromTo（$（'#hammer'），1，
{css:{旋转：0}，直接引用程序：true}，
{css:{rotation:-25}，ease:Quad.easeInOut}），
TweenMax.fromTo（$（'#触发器'），1，
{css:{旋转：0}，直接引用程序：true}，
{css:{rotation:40}，ease:Quad.easeInOut}）
]),
500，//滚动两周的持续时间
200）；//偏移量？
});

---

如果有人能给我帮助，我将不胜感激。我已经在网站上尽可能多地阅读了，并查看了各种代码片段。还是不明白

所以我看到这篇文章已经有几个月了，让我先说一句，我还没有一个解决方案，但我觉得onComplete是处理它的方法。存在一些问题，至少在google主机站点上，DOM无效，资源加载不正确。我建议使用JSFIDLE与社区共享代码，以帮助调试。从你的链接中抓取标记给了我几个坏的div，我必须修复它们。我认为它们只是缺少结束标记（即

），但您可以区分这两个标记来验证这一切。而且，看起来您两次包含jQuery，甚至再次检查它，如果找不到，则进行加载。在清理完所有这些之后，它的表现似乎和你期望的一样。尽管如此，我相信您也在寻找一种方法，在继续向下滚动时，也可以为释放的触发器和撞针上的锤子闭合设置动画。实际上，我是在尝试做了一些非常类似的事情之后偶然发现你的问题的。基本上，我只是尝试在元素进入溢出DOM元素时淡入，然后在它即将离开元素时退出，作为进入/离开时任何其他入/出二者的概念证明。所以，正如我最初所说的，我相信onComplete会是你们想要的，但这并不是我想要做的。还是不确定，也许其他人会插话进来。无论哪种方式，我的想法都有一个共同点。不确定您是否需要fromTo方法，因为我已经用to方法替换了它，因为它的“from”状态在页面初始化时是正确的。如果你能找出为什么onComplete在加载时开火，并决定你应该是个好的。希望这至少能给我们提供更多的见解，因为在将近三个月之后，还没有人给出答案。如果你把这一切都解决了，如果你能更新这篇文章来展示解决方法，那就太好了

CSS:

HTML:

body{
    background: url(https://googledrive.com/host/0B8V6b1tb9Ds5cDBYTlJpOWhsb1U/new/plus_yellow.png);
    background-color: #FFFF00;
    background-repeat:repeat;
    height: 3000px;
}

#gun{
    position: fixed;
}

#body{
    z-index: 2;
    position: absolute;
    left: 0px;
    top: 100px;
}

#slide{
    position: absolute;
}

#slide1{
    z-index: 3;
    position: absolute;
    left: 91px;
    top: 7px;
}

#slide2{
    z-index: 1;
    position: absolute;
    left: 735px;
    top: 95px;
}

#barrel{
    z-index: 0;
    position: absolute;
    left: 371px;
    top: 25px;

}

#hammer{
    z-index: 0;
    position: absolute;
    left: 63px;
    top: 60px;

}

#trigger{
    z-index: 0;
    position: absolute;
    left: 345px;
    top: 64px;

}

<div id="screen1">
<div id="gun">
    <img id="body" src="https://googledrive.com/host/0B8V6b1tb9Ds5cDBYTlJpOWhsb1U/new/body.svg" alt="body" />
    <div id="slide">
        <img id="slide1" src="https://googledrive.com/host/0B8V6b1tb9Ds5cDBYTlJpOWhsb1U/new/slide1.svg" alt="slide1" />
        <img id="slide2" src="https://googledrive.com/host/0B8V6b1tb9Ds5cDBYTlJpOWhsb1U/new/slide2.svg" alt="slide2" />
    </div>
    <div>
        <img id="barrel" src="https://googledrive.com/host/0B8V6b1tb9Ds5cDBYTlJpOWhsb1U/new/barrel.svg" alt="barrel" />
        <img id="hammer" src="https://googledrive.com/host/0B8V6b1tb9Ds5cDBYTlJpOWhsb1U/new/hammer.svg" alt="hammer" />
        <img id="trigger" src="https://googledrive.com/host/0B8V6b1tb9Ds5cDBYTlJpOWhsb1U/new/trigger.svg" alt="trigger" />
    </div>
</div>

var controller = $.superscrollorama(),
handleComplete = function(elem) {
    console.log('complete', elem);
    $('#'+elem).css('rotation', 0);
};

controller.addTween($('#gun'),
    (new TimelineLite())
        .append([
            TweenMax.to($('#hammer'), 1, 
                        {css:{rotation: -25}, onComplete:handleComplete('hammer'), ease:Quad.easeInOut}),
            TweenMax.to($('#trigger'), 1, 
                        {css:{rotation: 40}, onComplete:handleComplete('trigger'), ease:Quad.easeInOut})
            ]),
            500, // scroll duration of tween in pixels
            200); // offset (helps with timing when needed)