Chaining Multiple Animations on the Same Timeline

[nevanthegreat]

Hi! I am really loving Green Sock! I have an animation working, but I am wondering if there is a way to animate all elements at the same time in the same timeline, if that makes sense?

 

See my codepen (you may want to view on codepen or resize the codepen window to see it clearly). My goal with this is to have each box fade in and transform/translate/scale all towards the center of the section and then to fade out at the same time. But, I am trying to get them to do this all at once and to come from different directions.

 

I tried chaining .from().from()'s, but this just plays one and then starts another.

 

I tried something like:

tl
  .from(".icons-animated #HumanStars", {translateX: -200, translateY: -200, scale: 0.3, rotation: 90, autoAlpha: 0, ease: "power2"}, 
".icons-animated #HumanStars strong", {translateX: -200, translateY: -200, scale: 0.3, rotation: 90, autoAlpha: 0, ease: "power2"});

but this doesn't seem to achieve my goal.

 

Is there a way to animate .from() and chain the animations inside that from? Which methods should I be reading about/what is the syntax for this if it exists? Or am I not approaching this the right way? Thank you so much.

See the Pen abNRBeB by EvanScorpion (@EvanScorpion) on CodePen

[ZachSaucier]

Hey nevan. The position parameter of timelines allows you to do this. 

 

FYI you can just use x and y instead of translateX and translateY.

[nevanthegreat]

3 hours ago, ZachSaucier said:

Hey nevan. The position parameter of timelines allows you to do this. 

 

FYI you can just use x and y instead of translateX and translateY.

Thank you so much Saucy Zach!!

 

Check out what I came up with (I updated it). Thanks for showing me the shorthand property too. I've also updated that.

 

Now I am wondering if you could point me in the right direction of accessing that entire timeline (or maybe each element) to fade it out and to fade in another element? Does that make sense?

 

Would something like this: https://greensock.com/docs/v3/GSAP/gsap.effects be in the right direction?

[ZachSaucier]

Fading out a timeline doesn't make much sense. Do you mean fading out the boxes? Sorry, I'm not following.