Input Animation with Velo

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!