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.

1. Enable Velo

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

• Wix Studio: If necessary, click and then Start Coding..

2. Set Up an Element to React to a User Action

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 occurs. 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 and open the Properties & Events panel and then add the onClick event handler.

3. The function for your event handler is added to your code in the code editor:

   Copy

3. Add Code to Your Event Handler

Now you’ll need to set up the image so it’s not visible when the page loads. 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 open the Properties & Events panel, then select Hidden.
2. In the code editor, add the .show() function to your image element using the image ID which can be found in the Properties & Events panel.
   Copy

4. Add an Animation

Many functions accept an optional parameter to change how the function works. For example, you can add animations like FadeIn, Drop-In, Fly-In, and Spin-In to the .show() function using the effectName parameter. ​To add a Slide-In animation when the button is clicked, use 'slide' as the effectName parameter as follows:

Now when the button is clicked, the .show() function runs on your image with the 'slide' animation.

Next Steps

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.