Shadow Box

[jeff4gee]

I know there are many ways to do a shadow box effect but is there a simple method that incorporates GSJS much like the shadow box effect for downloading GreenSock packages.

 

Thanks for you help.

[GreenSock]

Not that make it completely automated (yet), no. But I can tell you what we did here: just create a div that's got styles like this:

 

#dimmer {
    background-color: black;
​    ​opacity:0;
    visibility: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    top:0px;
    left:0px;
    z-index: 100;
    cursor: pointer;
    margin:0;
    padding:0;
}

And then of course your actual content should have a higher z-index than that so that it shows up in front. Add a "click" listener using jQuery like this so that when it is clicked, things animate off/closed/whatever:

 

$("#dimmer").on("click", closeShadowBox);
function closeShadowBox() {
    TweenLite.to("#dimmer", 0.2, {autoAlpha:0});
    //and then add your code to animate your content out - here's a simple fade-out...
    TweenLite.to("#shadowBoxContent", 0.2, {autoAlpha:0});
}

So you can use a simple autoAlpha tween to make the dimmer bg visible.

 

TweenLite.to("#dimmer", 0.2, {autoAlpha:0.6});

And of course animate your content on however you please. 

 

Is that what you were looking for? 

[jeff4gee]

Thanks for the quick reply. This is exactly what I was looking for. This will help me build it out. I did not realize how easy it was. Thanks again.

[jeff4gee]

One other question about the GSJS shadow box. How can I have a css3 animation play for the content animating in and then fall back to another tween when browser doesn't support css3. 

 

Thanks.

[GreenSock]

Read through this thread:

http://forums.greensock.com/topic/7256-ie-9-fallback-for-3d-transform/