Jump to content


Floating Input Label

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

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?



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

Link to comment
Share on other sites

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





  • Like 4
  • Thanks 1
Link to comment
Share on other sites

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

  • Like 1
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.