Having trouble fading out text

[InspireUX]

Folks,

 

I'm a newbie and have been learning to use the Timeline for a day now.

So far I've been able to build a sequence of text fading-in, but I'm not finding an easy way/command to get the text to fade out.

 

I think I've done a hack to get the fadeOut to work, but I'd like to know the best way to get this done.

 

All help is appreciated!

See the Pen NmgxXV by jaigk (@jaigk) on CodePen

[PointC]

You'll just need to switch a few of those from() tweens into to() tweens. When you use a from() tween, you're tweening from autoAlpha:0 to its current value (in this case it's 1). If you tween from 0 and then tween to 0 on each line of text, I think you'll get the desired result.

 

See the Pen OGgMdG by PointC (@PointC) on CodePen

 

Is that what you needed it to do? Happy tweening.

 

[InspireUX]

Ah yes, that's exactly what I needed to know. Thanks a lot PointC!

 

[InspireUX]

Okay, I'm not sure what I'm doing wrong here. The second group is not Fading in and out together. Any ideas why?

 

 

 

Update: Solved it!

Edited April 12, 2019 by InspireUX
Solved the issue

[PointC]

Cool. Glad to hear you solved it. I don't want to throw too much at you as I know you're just getting started, but you can just set a repeat for the timeline like this:

var tl = new TimelineMax({ repeat: -1 });

 

You're also repeating the same code for each group, so a loop would make your life easier. You could probably also use a stagger on those as well to shorten the code.

https://greensock.com/docs/TimelineMax/staggerFrom()

 

Happy tweening.

 

[InspireUX]

Great, thanks for that tip @PointC.

I'll give that a twirl.

 

Cheers!