Jump to content

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

Best way to simulate door opening on a video behind

Recommended Posts



I am looking for an example to animate something as this



I would like to have the 2 parts of the image open and let appear a video which has started when the 'doors' have oppened by 50%.

My question is that the 2 images should not only open but also disappear, as if they enter behind the display. With which API could I obtain this effect ?


Thanks for help


Link to comment
Share on other sites

This should be fairly straight-forward. You can do this mostly with TweenLite. Just wait for the user to click and then create 2 tweens that animate each door.

You can then use TweenLite.delayedCall() to call a function that will tell the video to start playing a few moments later.

// in response to a click
function startAnimation() {
   TweenLite.to("#door1", 1, {x:-300) // move left door to left
   TweenLite.to("#door2", 1, {x:600) // move right door to right
   TweenLite.delayedCall(0.3, startMovie)

function startMovie() {
  //whatever you do to start a movie

A more advanced (but not difficult approach) would be to have all your tweens and the callback that triggers the video in a timeline, but if you are just beginning, that isn't necessary.


As far as hiding the doors it all depends on how your css is set up, easiest thing is probably just to put overflow:hidden on your containing div.


There isn't much more we can advise unless we see how your html and css are set up. Best thing to do is to create a very basic demo using CodePen: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ but please keep in mind that our support is very focused on the GreenSock API and not so much on building projects. 

  • Like 3
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.