Tuesday, 27 August 2013

How to append this SuperScrollorama tween timeline

How to append this SuperScrollorama tween timeline

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.

No comments:

Post a Comment