Stagger from the last element

[evomedia.lt]

Started with: 

 

var t2 = new TimelineMax();
t2.staggerTo('.letter', 0.2, {opacity: 1, visibility:'visible'}, 0.1);

 

and ended animation with:

 

var x2 = new TimelineMax();
x2.staggerFrom('.letter', 0.2, {opacity: 0, visibility:'hidden'} , -0.1);

 

But visibility still remains of all elements.

[Jonathan]

Hello @evomedia.lt and Welcome to the GreenSock Forum!

 

It looks like you need to use the GSAP special property autoAlpha instead of opacity with visibility property.

 

By using autoAlpha, GSAP will set the right CSS visibility property value for you based on the opacity value and will be better on performance.

 

In your above code example it would be the following with autoAlpha:

 

So to start animation you can do this:
 

var t2 = new TimelineMax();
t2.staggerTo('.letter', 0.2, {autoAlpha: 1}, 0.1);

 

And for your ending animation you can do this:

 

var x2 = new TimelineMax();
x2.staggerFrom('.letter', 0.2, {autoAlpha: 0} , -0.1);

 

When using autoAlpha and you have it fading in from 0 and you need your element hidden when the page loads. Then just add the CSS visibility: hidden to the CSS rule for your element. Then when autoAlpha animates from 0 to 1, it will automatically change visibility: hidden to visibility: visible. and then when autoAlpha animates from 1 to 0, it will automatically change visibility: visible to visibility: hidden. This will allow you not to worry about setting the CSS visibility property when using autoAlpha.

 

You can find more about autoAlpha below:

 

autoAlpha is part of the CSSPlugin - https://greensock.com/docs/Plugins/CSSPlugin#autoAlpha

• 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.
  
  Example of usage:

  //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});

Does that help?

 

if your still having issues please create a reduced codepen demo so we can see your code in action to better help you!

 

 

Happy Tweening

[mikel]

4 hours ago, evomedia.lt said:

But visibility still remains of all elements.

 

Hi @evomedia.lt

 

That´s a result of staggerFrom: By default, immediateRender is true in from() tweens, meaning that they immediately render their starting state regardless of any delay that is specified. 

 

It may be that you made a typo here.

Here an example staggerFrom and staggerTo :

 

See the Pen f69cd3672bf660a79137132425b4db4e by mikeK (@mikeK) on CodePen

 

Best regards

Mikel

 

 

 

[Jonathan]

Hi again @evomedia.lt

 

And here is a helpful video tut by The Mighty @Carl.

 

It goes over that immediateRender special property @mikel advised on when you use any from(), fromTo(), staggerFrom(), or staggerFromTo() tweens.

 

Since from tweens have immediateRender set to true by default. So you need to set immediateRender: false for those from tweens.

 

 

Happy Tweening

[Mike_king]

 Please, I need help in creating an infinite vertical carousel loop with GSAP...

[Jonathan]

Hello @Mike_king

 

I understand you need help but we need to keep the posts clear of clutter from other topics. I see you already posted your new topic, that is good.  But please try not to post messages for help from another topic inside another topic. This will clutter up this topic and make it hard for other community members looking for answers and seeing off topic questions.

 

 

Thanks