Rotate issue and firing an event straight after other animations completed?

[dov]

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

[Rodrigo]

Hi and welcome to the forums.
 
Usually developers that work with scrollorama normally use the from method. What you could try is use a couple of TweenMax.set() instances to get the elements to their initial positions and then add the from tweens to the controller, like this:

/*THIS IS NOT NECESSARY FOR THE #SLOW-ROTATE ELEMENTS UNLESS IT HAS A ROTATION SET IN THE CSS MARKUP*/
TweenMax.set('#slow-rotate', {rotation:0, ease:Quad.easeInOut});

TweenMax.set('#fast-rotate', {rotation:-180, ease:Quad.easeInOut});

controller.addTween('#slow-rotate', TweenMax.from( $('#slow-rotate'), .25, {rotation: -90}, ease:Quad.easeInOut}), scrollDuration);

controller.addTween('#fast-rotate', TweenMax.from( $('#fast-rotate'), .25, {rotation: -1260, ease:Quad.easeInOut}), scrollDuration);

Also note that the css:{} wrapper and the immediateRender:true were stripped; this because neither is necessary, the engine detects if the property being tweened is a CSS property and sends it to the CSS Plugin and, by default in from and fromTo instances immediateRender is true so there's no need for it.
 
As for the animation being jagged and since you're working with a scrollDuration parameter I'm going to presume that this is happening with Chrome, maybe you could try with a JQuery plugin called NiceScroll, you can see it here: http://areaaperta.com/nicescroll/
 
As for the last question you could use a callback in the previous tweens for that element, like this:

controller.addTween('#fast-rotate', TweenMax.from( $('#fast-rotate'), .25, {rotation: -1260, ease:Quad.easeInOut, onComplete:startAppear}), scrollDuration);

function startAppear()
{
    appearTween.play();
}
var appearTween = new TweenMax.from( $('#appear'), .5, {opacity:1, paused:true});

If this doesn't help please set up a live sample (fiddle or codepen) in order to get a better look at your code and see what could be causing the issue.

 

Cheers,

Rodrigo.

[dov]

Thank you so much Rodrigo. I'm going to have a play with this now and will let you know (and provide a fiddle) if I run into further issues. Thank you again!

 

Cheers,

Dov

[dov]

Ok Rodrigo,

 

Seems I'm in need of assistance, sorry.

 

See the Pen lcrqp by anon (@anon) on CodePen

 

What I'm trying to do is make the toast (in this case just text), start at 85px, slide down to 160px and then back up to 85px. Doesn't want to budge :/

 

Something I've done wrong..

[dov]

http://jsfiddle.net/HSEXf/ if that helps. Updated code but still no go

[jamiejefferson]

You can't adjust the positioning of an element using top/left/right/bottom when it has position: static (the default). Try adding this to your CSS:

#bread {
    position: relative; // or absolute/fixed
}

[dov]

Thanks Jamie. That solves the start position yet the animation doesn't happen? :/

[jamiejefferson]

Hmm I guess I can't really get my head around what you are trying for here. Superscrollorama is not something I'm familiar with. I can see an animation happening when I scroll though...

 

It looks like maybe changing to .to() tweens would work better if you want to go from 85 to 160 and back to 85 http://jsfiddle.net/HSEXf/2/