Jump to content


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

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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);
Link to comment
Share on other sites

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:

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()
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.




Link to comment
Share on other sites

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!




Link to comment
Share on other sites

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

Link to comment
Share on other sites

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
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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/

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.