Jump to content
GreenSock

timaging

delay in visibility

Recommended Posts

Hi,

 

I'm just starting to dive in to the .js stuff here. My first attempt seems to be giving adverse results

 

check out this page

 

http://www.taylorimaging.com/clientArea/RVCsite/

 

I've set the from value to be 0, but the image inevitably pops up first and doesn't actually start from an opacity of 0. Is this because I'm calling the CDN files and it takes a second to kick in, or maybe there's a bug with opacity?

 

thanks-

Dave

 

Link to comment
Share on other sites

Hi Dave,

 

Yes, the issue is that the page renders before the JS is loaded and executed. 

There are 2 solutions

 

in your css set opacity:0

 

#intropage01 {
    position: relative;
    width: 250px;
    height: 173px;
    background: url(images/RVC_2013homeCut_01.jpg) no-repeat;
opacity:0
}

and in your js use a to() tween with opacity

TweenLite.to(intropage01, 2, {opacity:1, delay:2});

Another method which I prefer is this

 

set visibility to hidden in css

 

 

#intropage01 {
    position: relative;
    width: 250px;
    height: 173px;
    background: url(images/RVC_2013homeCut_01.jpg) no-repeat;
    visibility:hidden;
}
 
then you can still use a from() tween with autoAlpha
TweenLite.from(intropage01, 2, {autoAlpha:0, delay:2});

That tween with autoAlpha will toggle visibility to "visibible" and set the opacity to 0 initially and then tween the opacity from 0 to 1.

  • Like 1
Link to comment
Share on other sites

cool... going with the opacity  0 appears to be working for me.

 

THANK YOU!!!

Link to comment
Share on other sites

visibility: hidden might be the better solution, as it will work on <=IE8, while opacity:0 won't (in the CSS I mean - GSAP can still tween opacity in old IE, it just uses the ms filter behind the scenes for you).

Link to comment
Share on other sites

hmmm... this is interesting. I do need to check for IE8 as well. BUT how does it fade in? Do I still call opacity for that?

Link to comment
Share on other sites

from() tween with autoAlpha
TweenLite.from(intropage01, 2, {autoAlpha:0, delay:2});

That tween with autoAlpha will toggle visibility to "visibible" and set the opacity to 0 initially and then tween the opacity from 0 to 1.

 

autoAlpha is just a smart combination of opacity (alpha from AS) and visibility - it's the same as saying opacity, except if opacity === 0, GSAP will set visibility:hidden, otherwise visibility:visible. This gives a pretty good performance boost if you keep a lot of things hidden on your pages.

  • Like 2
Link to comment
Share on other sites

  • 3 years later...

autoAlpha is just a smart combination of opacity (alpha from AS) and visibility - it's the same as saying opacity, except if opacity === 0, GSAP will set visibility:hidden, otherwise visibility:visible. This gives a pretty good performance boost if you keep a lot of things hidden on your pages.

Amazing, thanks. So happy for this. 

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