To animate some of your elements on your page/site, you can use predefined animations, like shown here in this VELO-API…
https://www.wix.com/velo/reference/wix-crm/$w-wixforms/show
This would show an element in a normal way…
$w("#myElement").show();
This one would do the same, but with some animation…
$w("#myElement").show('fade');
You have a choice of the following predefined animations…
You also can give your selected animation some options, like…
- —> “duration”
- —> “delay”
- —> “direction”
- and so on…
let fadeOptions = {
"duration": 2000,
"delay": 1000
};
And use them in your selected animation…
$w("#myElement").show('fade', fadeOptions);
Another possibility you will find here…
An example-code could look like this…
let floatOptions = {
"duration": 2000,
"delay": 500,
"direction": "top"
};
$w.onReady(()=>{
$w('#myElement').onClick(()=>{
$w('#myElement2').show('float', floatOptions)
})
})