Jump to content


Tweening autoAlpha creates gray background on PNG24 image

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



I'm tweening the autoAlpha of a PNG24 image, but a gray background is appearing around it, in the area that should be transparent.


I set it's "visibility:hidden" in the CSS. Then I use Javascript to find out if it's visible in the browser while scrolling. When it is in the viewable area, I tween it to autoAlpha = 1, and in the end of the tween I remove the listener. Basically, this is to implement the effect of showing images only when the user scrolls down to them.


But strangely, that gray background is being created. Am I doing something wrong? Is there a technique to prevent this?


I attached the troublesome image to this post so you can see it.




Link to comment
Share on other sites

This image seems to have some sort of shadow around it, if you open it with Photoshop you can see its not tottaly white or transparent around it. If that is not the case then I'm not sure what is going on, as I have set autoAlpha with many .png transparent images and it worked fine.

Link to comment
Share on other sites

Thanks for your test Michael, and yes, the badge does have a slight glow around it, but this glow does not fill the entire image.


If you try opening the image again in Photoshop, use the marquee tool and select a portion of it, far from the badge, near the borders, and Photoshop will tell you either "Could not complete your command because the selected area is empty", or "Warning: no pixels were selected".


There is indeed transparency, otherwise we wouldn't even see the white/gray chess underneath it.


Still looking for a solution for this...

Link to comment
Share on other sites

Found the solution to my own problem.


There was a conflict with another CSS property coming from my Twitter Bootstrap, called "badge", just as the CSS class name I was using for my badge image.


Sorry for the false alarm

Link to comment
Share on other sites

Let me know if there any place where I can mark this thread as "resolved", I can't find such option anywhere. Thanks

Link to comment
Share on other sites

Hi Antonio,


Welcome to the GreenSock forums. Sorry to hear you are having trouble.


I did a test with your image and I don't see anything inherently wrong with it that would cause any problems:



Is the problem happening only in a particular browser?

Link to comment
Share on other sites

Glad to see you got it worked out. No worries!

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.