autoAlpha

[the1the]

Hello,

 

why is the second element viewable from the start?

It has a css visibility:hidden ? Seems like autoAlpha is breaking the chain?

 

 

See the Pen gPjPXE by anon (@anon) on CodePen

[Dipscom]

Hi  the1the, welcome to the forums!

 

What is breaking the chain is the two .from() calls you have. Just get rid of the second .from() from each of the elements and it works as it should.

 

See the Pen eJjJPW by dipscom (@dipscom) on CodePen

 

*Pro tip* You do not need to do a "selectElementById" variable declaration and call. GSAP has its own selector engine. You can feed the ID or class name directly.

[Jonathan]

Hello the1the, and Welcome to the GreenSock Forum!

 

Your codepen was not working due to having the doctype, head, and body tag in the codepen HTML panel, Those tags are not needed since the HTML panel is basically the contents of the body tag. And you were yusing a TweenMax link in the codepen scripts that was not working. GreenSock Tweenmax is available as a dropdown option in codepen under the JS gear icon.

 

from() tweens have immediateRender set to true by default, since they render immediately by default.

 

You might have to set your from() tweens to have immediateRender: false

 

Here is a nice video tut on from() tweens and the immediateRender special property

 

 

And here is a link to the CSSPlugin docs on the autoAlpha special property:

 

autoAlpha is part of the GSAP CSSPlugin.. taken from the CSSPlugin Docs:

http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

•  autoAlpha   
  Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.

//fade out and set visibility:hidden
TweenLite.to(element, 2, {autoAlpha:0});

//in 2 seconds, fade back in with visibility:visible
TweenLite.to(element, 2, {autoAlpha:1, delay:2});

[Dipscom]

*note to self*: Never, EVER, write a quick sloppy answer in the forums and walk away thinking you got it right. Otherwise the bogeyonathan will hunt you down, shoot you down with a thoroughly complete dedicated custom built highly detailed answer. It won't even break a sweat. And you... You will look like a plonker.

[Jonathan]

No worries Dipscom your doing Great

[Carl]

Don't worry Dipscom, it happens to the best of us. FWIW your answer wasn't wrong.

 

the1the,

 

I think it would help if you described what the code is supposed to do. 

 

To expand on Dipscom's answer: 

if you are tweening an element from autoAlpha:0 it will animate it from 0 to 1.  If you then create another tween that tweens from autoAlpha:1 nothing will happen because autoAlpha is already 1 (from the previous tween).

 

And like Jonathan mentioned, when doing 2 from() tweens on the same properties of the same object you have to be careful with immediateRender.

 

I'm taking a guess, but is this the end result you are looking for?

 

http://codepen.io/GreenSock/pen/xZJOPw?editors=0010

[the1the]

Hello,

 

thanks for your reply.

tl.from(typo1, 2, { autoAlpha:0});
tl.from(typo1, 2, {autoAlpha:1}, "+=1");
tl.from(typo2, 2, { autoAlpha:0, immediateRender: false});
tl.from(typo2, 2, {autoAlpha:1,  immediateRender: false});
tl.from(typo3, 2, { autoAlpha:0, immediateRender: false});
tl.from(typo3, 2, {autoAlpha:1,  immediateRender: false});

I tried this, but its stopping at the second element and not fading out.
I've worked several times with GreenSock and never ran into this kind of problem.....I'm getting old.

[the1the]

Don't worry Dipscom, it happens to the best of us. FWIW your answer wasn't wrong.

 

the1the,

 

I think it would help if you described what the code is supposed to do. 

 

To expand on Dipscom's answer: 

if you are tweening an element from autoAlpha:0 it will animate it from 0 to 1.  If you then create another tween that tweens from autoAlpha:1 nothing will happen because autoAlpha is already 1 (from the previous tween).

 

And like Jonathan mentioned, when doing 2 from() tweens on the same properties of the same object you have to be careful with immediateRender.

 

I'm taking a guess, but is this the end result you are looking for?

 

See the Pen xZJOPw?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Thanks a lot Carl!

However its a bit confusing for me that autoAlpha acts this way.

[Dipscom]

Hi the1the,

 

What you need to pay attention is the method you are calling. You need to follow the .from() call with a .to() so you can fade something in and then fade it out. You should not have two .from() methods targeting the same element.

tl.from(typo1, 2, { autoAlpha:0});
tl.to(typo1, 2, {autoAlpha:1}, "+=1");