Interactions are fundamental to how users engage with your web content. Actions like clicking, scrolling, or hovering on a screen can significantly enhance the user experience and increase reader engagement. In Vev, interactions have three essential terms:
Trigger | A trigger is the activating behaviour, such as clicking on a component or scrolling the view. |
Target | The target is defining where the action should take effect when the trigger activates, like in a slideshow. |
Action | The action specifies what should happen when the trigger activates, such as moving to the next slide in a slideshow. |
Let's look at a slideshow with clickable navigation as an example. This involves establishing a connection between two key components: the slideshow and the button. This connection is visually represented with an arrow on the canvas as shown in the image below.
When a user clicks the button (the trigger), the slideshow (the target) advances to the next slide (the action), creating a seamless interaction.
However, there are cases where a trigger can only connect to a single component, without a connection between two components as demonstrated above. One such example is when you add an 'on timer' trigger to a slideshow. This trigger instructs the slideshow to perform an action at a specific timed interval. Time serves as the activating factor, and the action is executed when the timer reaches 0 milliseconds. In this scenario, the slideshow has a trigger attached to itself but also acts as the target component.
You can identify this by a simple lightning icon displayed in the top-right corner of the component without any arrow connection:
Delve deeper into different trigger types, conditional settings, and actions compatible with specific components by visiting our comprehensive guide.
To create interactions in Vev, it's essential to understand these terms. Here's a step-by-step guide on how to get started:
Adding interactions
You can set up and edit interactions in two ways:
1. From the interactions tab
Begin by selecting the component you want to add a trigger to.
In the editor's top right corner, click on "Interactions" to open the Interactions tab.
You can add a trigger by either selecting one from the suggested triggers or by clicking the "+" button.
Choose your target component from the list or specify your conditions, depending on your selected trigger.
Finally, specify the type of action you want when the trigger activated.
2. From the canvas
Hover over your component's outline until a "+" button appears.
Click and hold the "+" button, then drag it onto your target component to connect them.
By default, the trigger is set to a click, but you can change this in the interaction form that appears after connecting.
Choose the desired action.
After adding an interaction, don't forget to preview your project to ensure it functions as intended.
Editing interactions
To edit an interaction:
Open the interaction form from the Interactions tab by clicking on the listed items under the "Interactions" title.
Click the interaction arrow on the canvas to open the form.
Alternatively, click the interaction icon from the layers panel.
By understanding and utilizing these interaction principles and guides, you can create more dynamic and engaging web content in Vev.