Two Separate Transforms Simultaneously?

[kevmon]

Hey everyone, it's my first time using GSAP and I'm stuck.  I'm trying to run separate animations on one element at the same time.  However, each animation has a separate duration and easing.

 

Animation 1:  transform X & Y from -100% to 0, over 1s, ease in-n-out

Animation 2: transform rotate from 45 to 0, over 2s, elastic

 

I can make this work by having the element inside a wrapper, and applying the effect on the wrapper and inner element separately, but at the same time.  But is it possible to do these both on just the single element?

 

Thanks in advance!

[Sahil]

Ya sure you can animate multiple properties of same element. In following demo I am using timeline and setting position parameter to zero so both animations will start at same time. If you are not using timeline then you can define two TweenMax tweens and they will run at the same time.

 

See the Pen xaqPMG?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

[kevmon]

Ah, thanks @Sahil!  The reason I thought you couldn't do this is because when animated with CSS transforms, one will overwrite the other if they're not all in the same property.  Loving how powerful this is.

 

Thanks again

[GreenSock]

9 hours ago, kevmon said:

The reason I thought you couldn't do this is because when animated with CSS transforms, one will overwrite the other if they're not all in the same property.

 

Yep, that's why it's so hard to animate transforms with CSS, but GSAP was designed to allow you to independently control all of the transform components. So you can overlap animations as much as you want, use different eases for various parts, etc. 

 

Enjoy!