Sliding door?

[Jerrys]

What's the easiest way to slide a square div into position from the side so that it appears to scale horizontally from 0% to 100%?   Do I have to somehow use a mask?

Thanks! 

[Jonathan]

Hello Jerrys, and Welcome to the GreenSock forum!

Do you have an code example or demo example of what you have tried or what your trying to do, I am a little confused on your question?

 

If your just doing like a sliding door you can use animate scaleX and set the transformOrigin to 0% 50% so it slide from the left.

 

See the Pen qNzOqw?editors=0110#0 by jonathan (@jonathan) on CodePen.

 

If this does not answer your question feel free to create a codepen example. Here is a video tut on how to create a codepen example.

This way we can test your code live on codepen to better help you!

Thanks!

[Jerrys]

Just imagine a door that slides inside a frame that is concealed before you slide it closed.  So when it is half done, you only see half the door.  I never should have mentioned scaling.  I'm just wondering broadly how to do that.  I'm pretty sure I could work out the details.   Maybe somebody has a clever idea.

 

Can I use z value effectively with gsap to determine which <div>s are on top?  Or, in my sliding door example, on bottom?

 

[Jonathan]

Did you sliding door codepen example above?

[joe_midi]

How about something like this?

 

 

See the Pen XKLmko?editors=0010 by joemidi (@joemidi) on CodePen.

 

Just using a parent container with overflow: hidden then move the 'door' div out of the way using x.

[Jonathan]

This other way uses my same example from above but instead of animating scaleX:1 it animates to scaleX 0.5

 

See the Pen qNzOgE?editors=1000 by jonathan (@jonathan) on CodePen.

 

Without using overflow hidden as a mask or a traditional mask. Either way will work fro what you want to do

 

[Jerrys]

Thanks Joe.  That'll probably work best.  Jonathan, yours didn't seem to work in my browser.

[Jonathan]

Sorry about that the stupid codepen HTML editor panel auto corrected my HTML comment.. Try it now

 

See the Pen qNzOgE?editors=1000 by jonathan (@jonathan) on CodePen.

 

[Jerrys]

Still not working.  You know I like the way the text looks on Joe's.  Does yours look the same?

[Jonathan]

That is weird why you don't see it working .. i tested it on Windows 10 and Windows 7 in latest Chrome, Firefox, IE11 and Edge. I even tested it on Mobile Chrome latest Android and Mobile Chrome build and i see it workling.

 

The pen that Joe forked was from my original codepen above.

 

See the Pen qNzOgE by jonathan (@jonathan) on CodePen.

 

Mine looks the same, except it animates faster since it s duration is 0.6 instead of 1 second.. but the effect is the same even though one animates x and the other scaleX

 

Do you see my codepen working joe_midi if your still out there?

 

Thanks!

 

[joe_midi]

They all work fine for me @Jonathan!

[Jonathan]

Thank you very much Joe

[Jerrys]

Now it's working.  Sorry.  It was really an HTML question.  But I was happy to see how you guys work.  Thanks!

[Jonathan]

No worries we are glad to help!