Jump to content
Search Community

autoAlpha and display properties

frankrue 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

Excellent work on this new JS library...

 

I am using this implementation in a new project, and I have two DIV layers: one layer, first in the z-index, is a set of images that will show on the home page and have interactive buttons in them for clicking. The second layer contains a sort-of introduction set of images. These images fade in (using the fancy TweenMax implementation), and, after a time, disappear. I am using the “autoAlpha” property.

 

Unfortunately, when the autoAlpha sets visibility to hidden, the DIV is still picking up my mouse interaction instead of allowing it to flow beneath to the buttons on the first DIV layer. Normally, I would use the “fadeOut” in jQuery, which, upon opacity reaching 0, sets the “display” property to “none”, which TRULY allows interaction with layers below.

 

Am I doing something incorrectly, or is this a limitation in the autoAlpha property? Because in Flash AS3, that autoAlpha property really saves me an extra step in code of having to shut of visibility, but, it seems, in JS, that visibility property doesn’t prevent the element from being in the way.

 

Thoughts?
Link to comment
Share on other sites

Any chance you could post a simple example? Setting visibility to "hidden" is supposed to do EXACTLY the same thing as display="none" except that it doesn't remove it from the flow of the document. In my tests, I couldn't click on something that had its visibility set to hidden. I'd be curious to see your example though.

Link to comment
Share on other sites

There's sort of a workaround, though it is quite ugly, where you set the CSS properties for mouse/pointer events to none at the end of the tween. There's probably a better way to achieve that with 100% reliability though so you don't have to keep track of the pointer/mouse state of the element.

Link to comment
Share on other sites

  • 1 month later...

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