Jump to content
Search Community

delay in visibility

timaging test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

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.
×
×
  • Create New...