Incorporating this text fade into the timeline

[AnimaChambers]

Hi,

 

I currently use a somewhat clunky method to achieve the following effect:

 

 

Which is running a separate TweenMax (at the bottom) with a 1.5s delay concurrently at the same time as the timeline to get the text to fade while the SplitText is also running.

 

This works and I'm happy with it, but I can't help but think there's a more correct way of doing this by including the instruction in the timeline instead of a bolted-on TweenMax?

 

I couldn't quite figure out timeline delays and such. 

See the Pen AXJYOJ by AnimaChambers (@AnimaChambers) on CodePen

[PointC]

Hi AnimaChambers 

 

You are correct. You can add that tween to the timeline and use the position parameter to change its start time. In your case, it looks like you want the fade-out tween to start 1.5 seconds after the SplitText animation begins so you'd write it like this:

tl.to("#quote", 2, {autoAlpha:0, y:0, ease:Power1.easeIn}, 1.5);

To learn more, I'd recommend taking a look at Carl's blog post about the position parameter:

 

http://greensock.com/position-parameter

 

Happy tweening.

[AnimaChambers]

Thanks! That's great - is something simple I missed. Will come in handy for other animations.