Floating Input Label

[Armandot6]

I created floating input labels, however, I don't think the way I wrote the code is the best way and seems redundant. For example I'm targeting the same elements more then once in different functions and using 3 different timelines, two of which are the reverse of the other, can anyone suggest a better way of writing this so its more modular?

 

Thanks!

See the Pen mqaEVN?editors=1010 by Armandot6 (@Armandot6) on CodePen

[OSUblake]

Hi @Armandot6

 

To avoid creating the same animation over and over, create your animations outside your event handlers. And animating font-size is almost never smooth. Consider using scale instead.

 

Here's an example of how to do text fields like Material Design.

 

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

 

 

 

 

[Armandot6]

@OSUblake Thank you, I see now how this should be structured. Not sure why I even used a timeline lol, still learning. Thanks again.