Door open animation

[bqhieu]

Hi pro,

 

I have to make a airplane fly across the screen - it's easy, of course! At the center of screen, the door at the end of airplane open. After that, a huge wooden crate falls out of the plane. I tried to research a lot but i can't make the door open and the wooden crate falls out. Could you please spend few minutes for help? Thank you so much!

 

 

[Dipscom]

Hi bqhieu,

 

Surely, that's exactly the same logic used in your previous issue. The one with the parachuting products. 

 

http://greensock.com/forums/topic/14024-skydive-animation/

[Jonathan]

Hello bqhieu, and Welcome to the GreenSock Forum!

 

To better help you so we can see what GSAP code you have tried, and see your code in context and in a live editable environment.

 

Can you please setup a reduced codepen demo so we can help you better?

 

 

Thanks!

[bqhieu]

Hello guys,

 

Thank you so much for your time. Well, i think i know 90% how to make my animation. Just about one problem. Firstly, please, have a look this video : 

 

 

https://www.youtube.com/watch?v=vLjIUmVzsIA&feature=youtu.be

 

 

I am trying to make a huge wooden crate falls out of the plane as video above. This isn't easy with me. Could you please give me an idea? I have created codepen below. Thanks for your helping!

 

See the Pen MeboOW by bqhieu (@bqhieu) on CodePen

[Carl]

Sorry, but something like this could take quite a bit of time to set up and get right. Maybe an hour or so and it is especially difficult to have to study how your html and css is all set up to figure out exactly what to do.

 

I think in this case I would put the box in a container div that is rotated to match the angle of the door. this way you can just move the box along the x axis to have it fall out of the plane. the container would live outside the plane but you would animate the container left to right at the same speed as the plane. once the box slides out of the plane, stop moving the container.

 

Hopefully that makes some sense and points you in the right direction.

[bqhieu]

Hi Carl,

 

Thanks for your quick answer. I got your idea. I am trying to research and make it. If you have a little time, please, review code and help me. i am really appreciate your support.

 

Thanks

[Dipscom]

bqhieu,

 

What exactly is it that you need help with?

 

You're asking people to review your code. I'm afraid the Pen you provided is not even a working pen. There seem to be no errors in the console but at the same time, there is nothing happening there.

 

Your question is a bit confusing to me. You provided a video of a rather complex animation but on the title in this thread you're mentioning "Door open animation".

 

Are you having issues rotating an element? You can choose where the pivot point of the element is by using transformOrigin when doing the rotation. Like this:

TweenMax.to(element, 1, {rotation:30, transformOrigin:"100% 100%"}); // This will make the element rotate around its bottom right

But, the general comment I have is that no one is quite sure what you need help with. As Carl mentioned, we keep the GSAP forum focused in the GSAP tools themselves and, the "Banner Animation" section of it focused in tools and techniques related to creating web banners. There's just not enough manpower here to open up for general programming questions, it's just impractical, I am afraid.