delay in visibility

[timaging 0 Likes (Newbie)]

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

 

[Carl 11,117 Likes (Superhero)]

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.

[timaging 0 Likes (Newbie)]

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

 

THANK YOU!!!

[jamiejefferson 1,199 Likes (Superhero)]

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

[timaging 0 Likes (Newbie)]

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?

[jamiejefferson 1,199 Likes (Superhero)]

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.

[TehThird 3 Likes (Newbie)]

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.