Trying to understand rotation

[gazelle]

Hi,

 

I just started learning GSAP and my first task is to animate an image like a hinge effect starting from the ground. I was able to get a similar effect but the image is upside down, I'm confused about rotation and would appreciate any help with a solution and what I did wrong.

 

Thanks!

 

See the Pen NGEgmq by gk (@gk) on CodePen.

[Diaco]

Hi gazelle 

 

Unfortunately the SVG spec doesn't support 3D transforms , you can have same effect ( visually ) by this :

TweenMax.from(".ny",1,{scaleY:0,skewX:-60,transformOrigin:"center bottom",opacity:0});

pls check this out : 

See the Pen wKQpgM by MAW (@MAW) on CodePen.

[gazelle]

Thank you @Diaco! I'm going to consider using PNG to make things easier now and probably in the future.