Help with field label transition (textarea)

Design help Animations & Interactions
1

Hello! My client requested an interaction on their form fields similar to what you can see in this example where the field label/placeholder text moves when the field is focused or filled out.

I found this old post here which helped me get part way. I basically set up the form in the correct way requested, added custom CSS in the page head to control the interaction, and added javascript before the closing body to toggle a ‘filled’ class so the interaction doesn’t revert if someone filled in a field.

I’m currently stuck on two things.

  1. How to get the interaction to have a nice easing transition so it’s not so abrupt
  2. How to get this to work with the textarea field. It only works with the input fields at the moment

Thanks for any insights!

Read only link

Staging

2

Hi @theecarls as WF is only GUI for HTML, CSS and JS the best way to understand how move placeholder is to type in your favourite browser keywords " moving placeholder text css" or similar to let search engine give you many results. Once you will understand how it is done apply you knowledge to WF.