Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
nevanthegreat

Chaining Multiple Animations on the Same Timeline

Recommended Posts

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

Link to post
Share on other sites

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.

Link to post
Share on other sites
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?

Link to post
Share on other sites

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

Link to post
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.

×