Flip a transformed element

[eightarmshq]

Hi there, 

 

I'm trying to Flip a skewed, scaled img tag from one position to another. The position is working well, but the transforms aren't smoothly being set. Instead, the scale snaps to the correct one at the end of the animation.

 

I think I'm missing something. In the codepen I show a few of the things I have tried. It seems like I want to add some other gsap properties to the Flip animation, but I'm not sure how to go about it. Any help very welcome!

 

Thanks

Dave

 

(Scroll down for the View button in the codepen that triggers the animation) 

See the Pen 21130befb94dd751663e143349558986?editors=0010 by EightArmsHQ (@EightArmsHQ) on CodePen

[mvaneijgen]

Hi @eightarmshq welcome to the forum!

 

You've disabled the forking of your pens, makes it really hard to make edits to your work. 

 

I've add some tweaks to your pen. I've add the active class to your image directly and  'scale,skewY' are the values that are changing  transform is the property!

 

I had to disable some of your code, because for anyone who isn't  you,  there is a lot happening. In the future it is better to strip as much code as possible from your demo and only show the relevant code, but I hope this will nudge you in the right direction. 

 

See the Pen yLEyGBg by mvaneijgen (@mvaneijgen) on CodePen

[eightarmshq]

Sorry I didn't realise that private pens can't be forked.

 

Thanks so much! this is perfect. I think I was confused as you write things like:

gsap.to(img, {scale: 0.5})

So I assumed you pass the gsap values, not transform. Just using transform works great!

 

Have a nice day.