Jump to content
Search Community

Animating dynamic input text

catepillar test
Moderator Tag

Go to solution Solved by catepillar,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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. 






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

Link to comment
Share on other sites

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 {

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.

  • Like 2
Link to comment
Share on other sites

  • 1 year later...

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...