Trying to animate 2 elements and once they finish animate another. First issue is that the rotation doesn't quite happen nicely, it does it in a really jagged way. It also doesn't really adhere to my -90 start position for the slow-rotate or the -180 start position for fast-rotate?
The below example should start at 3 o'clock and end at 6'oclock.
controller.addTween('#slow-rotate', TweenMax.fromTo( $('#slow-rotate'), .25, {css:{rotation: -90}, immediateRender:true, ease:Quad.easeInOut}, {css:{rotation: 0}, ease:Quad.easeInOut}), scrollDuration);
controller.addTween('#fast-rotate', TweenMax.fromTo( $('#fast-rotate'), .25, {css:{rotation: -1260}, immediateRender:true, ease:Quad.easeInOut}, {css:{rotation: -180}, ease:Quad.easeInOut}), scrollDuration);
The other thing is how to set something to appear STRAIGHT AFTER those 2 above events have occured. ie:
controller.addTween('#appear', TweenMax.from( $('#appear'), .5, {css:{opacity: 1}}), 50);