Velo Tutorial: Adding Custom Interactivity with Events

In this tutorial, we’ll show you how to set up an image so that it’s hidden when the page loads, only becoming visible when your visitor clicks a button. We’ll start by adding an image and button to a page, then set up the button to run some code when it’s clicked. Then we’ll configure an image so that it doesn’t automatically load with the page. Finally, we’ll add the code that will make the image appear, with an animation, when the button is clicked.

Velo adds advanced functionality to the Wix Editor, which lets you make your site more interactive and dynamic.

To enable Velo Dev Mode:

Click Dev Mode in your site's top bar and turn on Enable Developer Mode in the dropdown.

Once you’ve done this, you’ll notice a few changes in the Editor:

• The Properties & Events panel appears. If you close it, you can open it again from the Tools menu.
• The code panel is added to the bottom of the Editor.
• The Velo sidebar is added to the left of the Editor.
• More elements are available in the Add menu, including Input and Content Management System (CMS).

Your site can react to user actions with event handlers. When you add an event handler to an element, you’re telling your site to watch the element to see if that event happens to it. If it does, you’ll want your site to run some code. 

To set up an image to display when a button is clicked:

1. Add a button and an image to your page.

2. Select the button. Inside the code panel, the Properties & Events panel displays the properties for the button.

3. In the Properties & Events panel, click the onClick event, and then press Enter.

4. The function for your event handler is added to your code in the code panel:

   Copy Code
   export function button1_click(event) {
       // This function was added from the Properties and Events Panel.
       // Add your code for this event here:
   }

Now you’ll need to set up the image so it’s not visible when the page loads, and then add code so that the image appears when the button is clicked.

Interactions are coded using the Velo APIs. For example, to make an image appear, you’ll use the .show() function for the image element.

To set an image to be hidden on load and to show on a button click:

1. Select the image and then in the Properties & Events panel, select Hidden.

2. Hover over the image. You'll see the ID of the element in the upper-left corner, starting with a #. Remember the ID—you’ll need it later.

3. In the code panel, under "Add your code for this event here", press Enter to add a line inside the function. 

4. Type $w and then select your image ID from the list. The code that selects your image will be added. 

5. Press Period. A list of all the functions you can use with your image element will appear. Scroll down and select show(effectName, effectOptions): Promise. Its code will be added:

   Copy Code
   export function button1_click(event) {
       // Add your code for this event here:
       $w('#image1').show(effectName, effectOptions)
   }

   In the next step, we'll use the effectName  placeholder to animate how the image appears when the button is clicked.

   We won't use the effectOptions placeholder in this exercise, so remove it and the comma before it.

Many functions accept an optional parameter to change how the function works. For example, you can add animations like FadeIn, DropIn, FlyIn, and SpinIn to the "show" function. ​To add an animation when the button is clicked, select the effectName placeholder text in the code and type "SlideIn", including the quotation marks.

Copy Code
export function button1_click(event) {
       $w('#image1').show('SlideIn');
   }

Now when the button is clicked, the "show" function runs on your image with the "SlideIn" animation.

Note: If you don't want any animation, make sure to delete the effectName placeholder text, leaving the empty parentheses. The image will appear without any animation.

With Velo, you can do even more:

• Add more events and event handlers using the Velo APIs.
• Make sections with alternating layouts using the Slideshow element.
• Add collapsable sections. 
• Add interactions on elements as they enter the viewport.
• Manipulate Text, Image, Gallery, Repeaters, and other elements using code.