Jump to content


Shadow Box

Recommended Posts

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.

Link to comment
Share on other sites

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%;
    z-index: 100;
    cursor: pointer;

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? 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 



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.