Initial Text opacity to zero, then opacity to 1 after a delay

[nthony]

Hi,

 

I got this working but just wondering if there is a better way to use animations directly. I need the text to be initial have an opacity of 0 then only want the opacity to change to 1 only after a delay.

 

Thanks,

Anthony

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

[mvaneijgen]

What are you referencing with:

9 minutes ago, nthony said:

I need the text to be initial have an opacity of 0 then only want the opacity to change to 1 only after a delay.

 

Because right now you're animating blocks and do nothing with text opacity. 

 

Have you seen the following post, this is a really great tool to have in your belt when working with GSAP 

 

I was wondering, why you would have to first block change size with `width`, because all the others use scaleX and this is much more performant. 

 

[nthony]

Thanks,

 

I am controlling the player, so animation is initially in a paused state, so I do not need to worry about the flash as described in video.

 

What I am trying to find a better way of text to hidden until the block is fully shown, then the text content opacity will be 1. Then when the block is moving to right the text should be visible, just like in the example.

 

 

[mvaneijgen]

Sorry, I still don't understand what you mean. Could you maybe formulate your question or edit your pen with the issue you're facing (even pseudo code how you think it should work, really help)?

[Rodrigo]

Hi,

 

Just like @mvaneijgen I'm a bit confused about what you intend to do.

 

1. Do you want to animate the opacity of each letter as the colored blocks are moving to the sides?
2. Do you want to move the blocks completely to the sides and only when that animation is completed animated the text from opacity 0?

Assuming that you're after the second option, here is a fork of your codepen:

See the Pen XWBqppB by GreenSock (@GreenSock) on CodePen

 

If this is not what you want to do, please be specific about your project's needs and the current issue you're having.

Happy Tweening!