So you don't want to use an input title and you don't want the placeholder text to disappear as soon as the user clicks on the input. Well, do I have a solution for you. In this post, you will learn how to have a placeholder text turn into an input title using a little Velo.

---

import { timeline } from 'wix-animations';

$w.onReady(function () {
	const placeholder = $w('#placeholder');
	if ($w('#input1').value.length > 0) {
	} else {
		timeline()
		.add(placeholder, {scale: 1, y:0, x:0, duration: 400, easing: 'easeOutCirc'},0)
		.play();

}

$w('#input1').onClick(() => {
	const clicked = {y:-18,x:-80,scale:.5, duration:400, easing: 'easeOutCirc'};
	if ($w('#input1').value.length > 0) {
	} else {
		timeline()
		.add(placeholder,clicked,0)
		.play();

}

});

});

---

Just copy this code over to your site and make sure you name your text and input elements properly. Keep in mind, it may take a bit of guess and check to make sure the placeholder text goes exactly where you want it to go!

Have fun using this on your website!