Input style when focused

Need help
1

Hi,

I’m making a an input style where when the input is focused, the placeholder greys out, becomes smaller and moves to the top of the space where the user types the data (still in the same input box) and is still displayed. Right now, I can only find grey out. How do I do the other 2 options?

Thanks.

2

Hey @jogo88,

I’ve done this before with an app and you’ll need to use a text element that is hidden until the input is focused. When focused, it’s visible, already small, and you can animate it in so it looks like it moves.

Gaby | Coaching Bubble

3

Got it. Thanks so much!

1 Like
4

Does anyone have a live example they’d be willing to post? This sounds like very intriguing UX.

5

Something like this:


bubble.is/page?type=page&name=field_label_animation&id=forumapp3&tab=tabs-2

6

Wow! This is excellent, thanks for sharing. Would it be possible to see a screenshot of the workflow?

7

I edited the link up there to reveal the editor link. For whatever reason, linking to the forum app generates that big box generic thing.

1 Like
8

I have one more question regarding this. Is it possible to somehow set this up as a reusable element with dynamic text that would be equal to input’s placeholder?

That would be useful if you have to manage quite a lot of them.