Trying to animate a working gun. Please help!

[nixnerd]

I vectored a gun and saved it as 6 files. Now I need to code them to move so the gun can fire when someone scrolls.

I’m using Superscrollorama to power the animation. If you’re not familiar, it is in-turn powered by the Greensock tweening engine.

Here’s what I have so far: Example

Here is my code:

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

            //individual element tween examples

            controller.addTween('#trigger', TweenMax.fromTo( $('#trigger'), 1, {css:{rotation: 0}, immediateRender:true}, {css:{rotation: 40}, ease:Quad.easeInOut}), 300, 200);

            controller.addTween('#hammer', TweenMax.fromTo( $('#hammer'), 1, {css:{rotation: 0}, immediateRender:true}, {css:{rotation: -25}, ease:Quad.easeInOut}), 300, 200);

    });
    </script>

I need to create a timeline (rather than an individual tween) that makes the hammer snap to rotation:0 after it gets to rotation: -25. In other words, I need to learn how to give each element multiple animations in succession.

The superscrollorama site has some documentation but everytime I try to pull this off, I fail.

Can anyone help? I VERY MUCH appreciate it.

[Senff]

No need to create a second discussion for it: https://css-tricks.com/forums/topic/help-me-code-a-working-gun/

[Author]

Posts