Possible to Animate Properties of A Single Element at Different Times?

[AJeezy9]

Hey all, 

 

I am trying to create a tween that morphs an element into a larger element, & then back.  

 

To do this, I am animating the element's starting height, width, top, and left properties to the desired size and position. 

 

I am able to complete a timeline that accomplishes this using either:

 

(a) a single tween that morphs the object to its final position and size or
( two consecutive tweens that first morphs the position than the size...

 

but I am wondering whether it is possible to animate the properties with different timings, e.g., I would like the height and width to begin animating a quarter of a second after the top and left position begin transitioning.  

 

Using CSS, I would be able to set both transition timing and delays specific to each property, so I assume I can probably do the same using GSAP, yet I'm just not sure how.

 

[GreenSock]

Yes, absolutely - you have total control of every aspect of your animations with GSAP, much more so than you did with CSS. I would highly recommend watching these two videos:

 

http://greensock.com/position-parameter
http://greensock.com/sequence-video

 

You could use basic tweens with delays:

TweenLite.to(element, 1, {top:100, left:200, ease:Back.easeOut});
TweenLite.to(element, 1, {delay:0.25, width:300, height:200, ease:Power2.easeInOut}); //notice the slight delay

But I'd strongly advise you to get comfortable with timelines because they'll open a whole new world of possibilities to you, and make some tasks much easier:

var tl = new TimelineLite();
tl.to(element, 1, {top:100, left:200, ease:Back.easeOut})
  .to(element, 1, {width:300, height:200, ease:Power2.easeInOut}, 0.25);

Notice I defined a position parameter in the 2nd tween (0.25). That's an absolute value, so it'll start 0.25 from the beginning of that timeline. You could also use relative values like "-=0.75" to start it 0.75 seconds before the end of the last tween, or you could use labels and a relative amount compared to the label:

var tl = new TimelineLite();
tl.to(element, 1, {top:100, left:200, ease:Back.easeOut}, "myLabel") // since "myLabel" doesn't exist yet, it adds that label.
  .to(element, 1, {width:300, height:200, ease:Power2.easeInOut}, "myLabel+=0.25"); //this tween will get placed 0.25 seconds after myLabel

Spend a little time with those videos and let the concepts sink it. I'm pretty confident that the light bulb will go on at some point and it'll make a lot of sense to you and you'll feel very empowered. Advanced tip: you can nest timelines within timelines as deeply as you want. These concepts can open up all sorts of possibilities that you could never accomplish with CSS. You just have to get past the initial learning curve. If you haven't watched Carl's excellent "Getting Started" video, I'd consider that a must-watch too: http://greensock.com/get-started-js/