Jump to content
GreenSock

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

Best way to simulate door opening on a video behind

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

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.
×