Jump to content
Search Community

Staggering issue with TimelineMax

phantomboogie 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

Hi,

 

Thanks for the demo. I had trouble understanding what you are having trouble with. You have 5 animations and you didn't mention which ones need to happen at the same time.  I can only assume that the 2 that have a position of 0 are the ones you want to have happen simultaneously. One of these tweens has a duration of 0.

 

I commented out the other tweens and changed some properties so that you can see that both the tweens happen at the same time.

 

var tweenTl = new TimelineMax();
tweenTl       
    .to('#head', 4, {y:-50, transformOrigin: '50% 100%'}, 0)
    //.to('#head', 0.7, {y: "-72", ease: Back.easeOut})


    .to('#eye', 4, {x: "30px", y: "50px", scale:3, transformOrigin: '50% 70%', ease: Linear.easeNone, autoAlpha:1}, 0)
   // .to('#eye', 0.3, {x: "20px", y: "35px", scale: 1, ease: Linear.easeNone})
   // .to('#eye', 2, {x: "15px", y: "25px", scale: 1,  ease: Elastic.easeOut});

 

http://codepen.io/GreenSock/pen/ZBoKqK?editors=1010

 

If you need more help, please edit the demo to have just enough code to clearly illustrate the problem and provide more details, perhaps some notes about which tweens aren't running at the right time.

 

Thanks!

  • Like 3
Link to comment
Share on other sites

Thanks Carl, I added comments to separate the two items and made the timing and start points the same. 

See the Pen vyjmOj?editors=0010 by phantomboogie (@phantomboogie) on CodePen

 

It seems the rectangle is moving up, and then the circle is animating in. 

I'm assuming it's animating in sequentially which I'm trying to avoid...do you think it's a visual thing instead? 

  • Like 1
Link to comment
Share on other sites

Hi phantomboogie :)

 

I think I see where the confusion is coming from. You have a zero duration tween to set some properties and are setting that to start at a time of 0, but the tween that follows it will still just play in sequence rather than also starting at a time of 0. I think it might be easier to use set() for those initial positions like this:

var tweenTl = new TimelineMax();
tweenTl   
//set starting positions
   .set('#head', {y: "0", transformOrigin: '50% 100%'})
   .set('#eye', {x: "30px", y: "50px", scale: 0, transformOrigin: '50% 70%'})

//first part
  .to('#head', 0.7, {y: "-72", ease: Back.easeOut})

//second part
  .to('#eye', 0.7, {x: "20px", y: "35px", scale: 1, ease: Back.easeOut},0);

Here's a fork of you pen with that solution:

 

See the Pen qqYjKz?editors=0010 by PointC (@PointC) on CodePen

 
Hopefully that helps a bit.
Happy tweening.
  • Like 5
Link to comment
Share on other sites

Nice job clearing that up, Craig!

 

This is definitely an interesting case but working as expected, just keep in mind that new tweens always get added to the end of the timeline (unless you specify a position parameter).

 

I added a console.log() right before the last tween is added just to show that it is being added at a time of 0.7 seconds:

 

var tweenTl = new TimelineMax();
tweenTl   
//first part
    .to('#head', 0, {y: "0", transformOrigin: '50% 100%', ease: Back.easeInOut}, 0)
    .to('#head', 0.7, {y: "-72", ease: Back.easeOut})


//second part
    .to('#eye', 0, {x: "30px", y: "50px", scale: 0, transformOrigin: '50% 70%', ease: Linear.easeNone, autoAlpha:1}, 0);
console.log(tweenTl.duration())//0.7
    tweenTl.to('#eye', 0.7, {x: "20px", y: "35px", scale: 1, ease: Back.easeOut});
 
If both the head and eye had more elaborate animations and you wanted both to start at the same time, then you could create separate timelines for each element and nest them in a parent timeline at the same time like:
 
  • Like 3
Link to comment
Share on other sites

Thanks for the solutions Craig and Carl.

 

Most of the examples I've seen are animating an item from point a to b in a straight line.

If I want to tween point a to b, then c in a curved path, is gsap made to handle that?  

Assuming each (.to) point is a keyframe, are there rules to adding keyframes between where it starts and where it lands?

It seems like all my easing and timing is off when it happens when its in the timeline. 

 

Building onto this, I'm also trying to integrate it with scrollmagic and am running into a bunch of issues when trying to reverse the animation. 

I think these issues are coming about because of the middle keyframes?

See the Pen MbXgVe?editors=0010 by phantomboogie (@phantomboogie) on CodePen

Link to comment
Share on other sites

If you want to go from point a to point b to PointC (ha!), you could easily do that with the Bezier Plugin. It's automatically loaded with TweenMax.

 

Check out the docs for that here:

 

http://greensock.com/docs/#/HTML5/GSAP/Plugins/BezierPlugin/

 

Rather than worry about the position parameter for those tweens in the second part of the animation, I'd recommend nesting those timelines into a parent as Carl mentioned above:

 

See the Pen ENLXrJ?editors=0011 by GreenSock (@GreenSock) on CodePen

 

Here's another super simple example of nesting

 

See the Pen obyJEM by PointC (@PointC) on CodePen

 

Hopefully that helps a little bit.

Happy tweening.

:)

  • Like 4
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...