Best way to simulate door opening on a video behind

[C.Surieux 0 Likes (Newbie)]

Hello,

 

I am looking for an example to animate something as this

 

https://drive.google.com/open?id=0Bzx7LDFcZwmMYnhabVY0ZjRwc2M

​

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

CS

[Carl 9,066 Likes (Superhero)]

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.