Jump to content
Search Community

Starting opacity when autoAlpha fading from 0 to 1

Vic Emond 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

I am trying to show DOM elements in an animation that are initially hidden. I've tried initially setting their "display" to "none" in my CSS file, but then realized that the autoAlpha doesn't affect that property. Rather it sets the "visibility" to "hidden" (when going from 1 to 0 opacity - at least that's all the docs specify). So I tried setting the elements "visibility" to "hidden" in my CSS file instead. This certainly produces the intended initial layout, but my tween still doesn't fade my elements in. They just immediately appear at the end of the tween, rather than a smooth fade from 0 opacity up to 1. The only way I can get my tween to do what I want it to, is to laboriously set my opacity in my CSS like this:


zoom: 1; filter: alpha(opacity=0); opacity: 0;


...so that I cover all of my browsers. And I don't want to set opacity in my JS, because there is/can always be that initial flicker when you see the object on the page prior to Javascript kicking in and hiding it. Plus, that seems awful inefficient as well.


Using the autoAlpha method SHOULD be smart enough to set the opacity to 0, THEN set my "display" to "block" or "visibility" to "visible", THEN do the tween from 0 to 1. This would be most like the equivalent method in the AS version, wouldn't it? I realize that then heading back from 1 to 0, using that same method, would leave the question of whether or not to set the "display" back to "none" or the "visibility" back to "hidden" - but maybe there could be some flag set or something. Dunno.


Am I missing something here? Or is there a better way to handle this?

Link to comment
Share on other sites

I assumed people in that scenario would simply do a from() tween, like:


TweenLite.from(element, 1, {css:{autoAlpha:0}});


But I see your point and I suspect there will be plenty of other people who want to do regular to() tweens and would find it very convenient for the autoAlpha feature to automatically interpret an initial "visibility:hidden" setting (with opacity of 1) to mean that opacity should start at 0 instead. So I just uploaded a new version of CSSPlugin (and TweenMax) that has that functionality built-in. Let me know if that works well for you.


Oh, and the reason it only affects the visibility property is because that keeps it in the document flow whereas display:none removes it (causing a reflow, potentially shifting other things around)

Link to comment
Share on other sites

Wouldn't the "Tween.from" also potentially produce a flicker of the visible image until the Javascript kicks in?


Anyhow, thanks for uploading a new version of the CSSPlugin! This will help me out a ton. Your immediate response and support are second to none. Much appreciated.

Link to comment
Share on other sites

  • 4 months later...

Sorry to hear about the trouble, Tom - are you using the latest version of GSAP? I wonder if you've got a stale version from before that enhancement was made. And you are setting your element to visibility:hidden initially, right? If you're still having trouble, please post a very simple example so that we can take a peek at what's going on.

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