Jump to content

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

Door open animation

Recommended Posts

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!




Link to comment
Share on other sites

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! :)

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

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 : 






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

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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.



Link to comment
Share on other sites



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.

  • Like 2
Link to comment
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.