Jump to content
Search Community

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

dov test
Moderator Tag

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

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.
  • Create New...