Animate to width of not yet visible text

[t3ol5]

Hello guys,

 

When you click the button the icon disappears and the text appears instantly.

 

I'd like to make it smoother, like so:

Click - the icon disappears - the button scales up horizontally, kind of opens up, to make space for the text - the text fades in.

 

Any ideas are appreciated!

 

See the Pen PdOzav by t3ol5 (@t3ol5) on CodePen

[Carl]

The general idea would be to build a timeline. Here is a starting point for you

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

You may need to tweak it a bit.

 

[t3ol5]

That is cool, thank you!