Animating dynamic input text

[catepillar]

Just downloaded Square's cash transfer app and was pleasantly surprised at the elegance of the UX/UI. I'd like to replicate their dynamically sized input text with GSAP. Here's the video of it I took in action: 

 

As you can see in my Codepen, I've got somewhat far, but still need some help on the animations. When I remove the last character, rather than a smooth transition, it's rather abrupt, my guess from the "text-align: center" not being animatable.

 

Additionally, I've struggled to replicate the sliding up/sliding down animation of text, as seen in the video. Neither the "top" or "y" property seemed to have much of an effect  on my text.

 

If anyone has a recommendation or Codepen to suggest, it would be much appreciated. 

 

Thanks,

Jordan

 

 

See the Pen YXGeOg by makeitrein (@makeitrein) on CodePen

[Carl]

Thanks for providing the video and the demo. 

Both very helpful. Congrats on making considerable progress. What you have is quite cool.

 

The good news is you can get the vertical animation you want by adding this to the css panel

.character {
  position:relative;
}

changing top and left css properties only take effect if the element has position set at fixed, absolute or relative.

 

--

 

I can't really help with too much more though. I think it would take at least an hour or two of experimenting before getting close to Square effect.

As you have realized, I really wouldn't rely on text-align:center. 

 

I think you will need to do something where you add numbers to a container and then slide the container so that it is centered.. when it gets too big you then animate the scale down so that the width fits. Hopefully that helps a little.

 

There may be some folks around here that can help a little more, but again, it could take a little time. Definitely sounds like a fun challenge though.

[catepillar]

Doh! Knew it was something obvious like that. 

 

Also, I just realized that the Blake's Codepen you linked a few days ago for me - 

See the Pen XJQKVX by osublake (@osublake) on CodePen

- might be perfect in this situation. Just need a wrapper that animates to width: 0.

 

I'll see if I can get something going based off that.

[catepillar]

Got it! 

See the Pen OVRraB by makeitrein (@makeitrein) on CodePen

 

Just needed to add a wrapper and animate width: 0. 

 

Still need to do some custom stuff for the dollar sign and the initial input, but it's at a workable point now. 

[Carl]

Very nice! Glad you got it working.

[trevorwhealy]

Hi Jordan Rein, congrats on getting the animation effect. I stumbled across the post because I am hoping to accomplish the same! I've been trying to get ahold of you over various channels to ask if you could please restore the codepen so I could see how you managed to accomplish this. Thanks! - Trevor