Jump to content
Search Community

Changes in autoAlpha

Pavel 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


From 1.10.1 there is this change


- Altered autoAlpha behavior in CSSPlugin so that instead of explicitly setting visibility to "visible" when opacity isn't zero, it now sets it to "inherit" so that behaves more intuitively when it has an ancestor whose visibility is "hidden" (the descendent should honor that)


I use patched SplitTextPlugin for implode effect to show letters in the center of page. They assemble together. There is solid text in the center of screen with visibility: hidden or opacity: 0 (it does not matter).

At the first it is divided into single letters. then i put random screen coordinates to TimeLineMax and start "fromTo" method. I also add autoAlpha value to 1 to see letters pn screen.

Before 1.10.1 there were no problems. Now visibility is inherit and i don't know how to fix it.


IMHO there is not a good idea to change visibility to "inherit" because there is need to show objects (text for example) from 0 to max by autoAlpha. You can see this effect with old version of TweenMax at my website.






Link to comment
Share on other sites

I can see how the change in behavior can be a little frustrating, it is rare that we make these types of changes that affect existing code. When they come up we have to consider many angles. In this case due to customer feedback and sound logic we had to go with a change that would satisfy a great number of users.


Simply put, most people will expect that if a parent item has visibility:hidden its children will not be visible. 


And I totally see how in your use case the opposite behavior is convenient but we just don't see it as the way most folks will expect it to work most of the time.


The way you can solve the issue is simply to set the visibility of the element that contains your split text to visibility:visilble right before the characters animate.  I didn't have time to search through all your javascript code but you should be able to add a set() call to the timeline that animates in the letters

timeline.set(parentElement, {visibility:"visible"}) // or autoAlpha:1
timeline.fromTo(someLetter1, 1, {}, {})
timeline.fromTo(someLetter2, 1, {}, {})
timeline.fromTo(someLetter3, 1, {}, {})
timeline.fromTo(someLetter4, 1, {}, {})

Sorry for the inconvenience. Hope the explanation helps and you are able to implement a suitable update as shown above.


Let us know if you need more help.

  • Like 2
Link to comment
Share on other sites

Thanks! Work fine.

Behavior is as expected. But i have not used opacity effect from 0 to 1.

Then how can i achive this effect if i set . I set opacity:0 and then in "fromto" to 1. I did some tests and code does not work. 

Which data should i set to achive opacity from 0 to 1?

Link to comment
Share on other sites

You can use the following for an opacity:0 to opacity:1 fade with visibility:'visible'

// set starting opacity
TweenLite.set(target, { opacity:0 }); // or { autoAlpha:0 } would work

// tween opacity to 1 - visibility will be set as soon as the tween starts
TweenLite.to(target, 1, { opacity:1, visibility:'visible' });

// set starting opacity and visibility
TweenLite.set(target, { opacity:0, visibility:'visible' });

// tween opacity to 1
TweenLite.to(target, 1, { opacity:1 });

This also works as a fromTo()

TweenLite.fromTo('#hello', 1, { opacity: 0, visibility: 'visible' }, { opacity: 1 });

This change doesn't affect fading to opacity:0

TweenLite.to(target, 1, { autoAlpha: 0 });
  • Like 4
Link to comment
Share on other sites

  • 4 months later...

Hi, Just been bitten by this after moving from 1.9.8.


Simply put, most people will expect that if a parent item has visibility:hidden its children will not be visible. 


Well "most people" need to bother to actually learn their craft instead of just wingin' it.

Those of use who have, understand the workings of visibility and have done since it's inception.


This is a very bad move IMO.


Please can we have an option to use this how it's actually defined in the spec?

something like:

autoAlpha: 1 #=> visibility: inherit; if it really has to for noobies.
autoAlpha: 'visible' # => visibility: visible; for the rest of us.
Link to comment
Share on other sites

Sorry to hear about the frustration, Rob. I understand why you'd want autoAlpha to act differently. There's a legitimate argument on either side of this, and ultimately autoAlpha is a convenience property we've added with the goal being to make it behave in the most "intuitive" way that most people want. Granted "intuitive" is a bit subjective, but in my opinion, if an ancestor element is invisible, its children should be too. That's how it works in Flash, and that's where our roots came from. And even the name "autoAlpha" tips its hat to the Flash roots (there's no "alpha" property in CSS), so it seems appropriate to make it work in a consistent manner. Even if we ignore the Flash thing, I still think it's unintuitive to set a parent to visibility:hidden and have some of its children show up. 


Keep in mind that you can still accomplish exactly what you're looking for by using opacity and visibility both in the tween instead of only using autoAlpha. Were you aware that you could do that? 

TweenLite.to(element, 1, {opacity:1, visibility:"visible"});
  • Like 4
Link to comment
Share on other sites

Hey Jack.

Thanks for your reply. I must apologise, my message was in haste, I appreciate your comments.

I too have done my fair share of flash, I guess the change was unexpected. I rely on autoAlpha quite a lot to provide considerable performance gains.


I accept that most people would expect the behaviour and that they are your audience.

Yes I will use the approach suggested.




P.S i'm sure you know but `visibility: inherit;` is not supported on versions of IE < 9.

  • Like 2
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...