Jump to content


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

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

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


Link to comment
Share on other sites

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:




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/

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