How to append this SuperScrollorama tween timeline

Question

I am trying to animate a gun with SuperScrollorama. The idea is that the gun will fire as the user scrolls down. This involves some rather complex tweening.

Here's what I have so far (*works best in Firefox):

https://googledrive.com/host/0B8V6b1tb9Ds5cDBYTlJpOWhsb1U/index.html

Now that I have the trigger being pulled and the hammer rotating backward, I need to make the hammer snap to rotation: 0 after it's reached rotation: -25. I just can't figure out how to append this timeline.

Here is my script:

<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>

I would appreciate any help that anyone could give me. I've read as much as I can on the Superscrollorama site and looked at all sorts of code snippets. Still can't figure it out.

Answer 1

So I see this post is a few months old, and let me preface this with the fact that I do not have a solution quite yet, but I feel like onComplete is the way to handle it. There were some issues, at least on the google host site, with an invalid DOM and resources not getting loaded properly. I recommend using JSFiddle for sharing code with a community for help debugging. Grabbing the markup from your link gave me a couple broken divs I had to fix. I think they were just missing closing tags (i.e. </div>) but you can diff the two to verify it all. Also, it looks like you're including jQuery twice and then even checking for it again and loading if not found. After cleaning all of that up it seems to perform as you'd expect. Though, I believe you are also looking to find a way to also animate the trigger being released and hammer closing on the firing pin as you continue to scroll down. I actually stumbled upon your question after trying to do something very similar. Basically I'm just trying to fade an element in as it comes into the overflow DOM element and then back out when it is about to leave the element as a proof of concept for any other in/out tweens when enter/leaving. So as I said initially I believe onComplete would be what you'd want, but prolly not for what I'm trying to do. Still not sure, maybe some others will chime in on this. Either way, there's a with my idea below. Not sure you need the fromTo method as I've replaced it with just the to method since its "from" state is proper from initialization of the page. If you can find out why the onComplete is firing on load and resolve that you should be good though. Hopefully, this'll at least give a bit more insight since no one else has given an answer after nearly three months. If you do get this all worked out, it'd be great if you could update this post to show what the resolve was.

JSFiddle Link

CSS:

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;

}

HTML:

<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>

JS:

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)