top of page

Input Animation with Velo

Updated: Dec 30, 2024



Velo Code:


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();
        }
    });
});

Enjoy!


Scene 02 (0-00-00-26).jpg

elevate your client projects?

Transform Your Projects with the Ultimate 2024-2025 Wix Studio Template Bundle!

Group 8.png
bottom of page