To add a trigger, click Interactions in the Inspector panel. Then, from the triggers tab, click Add a Trigger. Finally, choose Click or Hover.Note: On mobile and tablet breakpoints, interactions are converted to on tap interactions.
Setting up an affected element
Choose the element you’d like to add a click or hover interaction to. The element can be the same as the trigger element or it can be any other element on the canvas.
Setting up an action type
From the Action type dropdown, you can choose what happens when a visitor clicks or hovers on the triggered element.
Setting up an interaction’s effect
Choose which effect you’d like to apply to the target element. You can choose between the preset effects or create a new, custom effect.
Using a preset effect
From the dropdown menu, you can choose between preset effects including Grow, Shrink, Float and more. Then, you can set its duration by adding start and end points. You can also choose the effect’s easing type.
Designing a custom effect
To create a custom effect, choose Custom from the Effect dropdown. Name the effect and hit Start Designing.
Navigating between initial state and effect design
From the dropdown, you can navigate between the element’s initial state—the way it will look when the page loads— and the element’s effect in order to choose which one you want to design.
Adjusting & designing the element
Under Adjust, you can edit the element’s appearance and its transform properties. You can change the element’s opacity, rotate it, and set the scale, skew, and translate values in their relevant units of measure. Depending on the type of element you select, you can also edit the fill color & opacity, border, corners, shadow, text and spacing.
Timing the effect
When editing an effect from the floating menu, you can set its duration by adding start and end points and choosing its easing type. Click Done to complete the setup.
Removing and editing interactions
To remove an interaction, click on the trash icon next to the trigger’s name. If you would like to edit it, click on the name of the interaction.
EXPLORE MORE TUTORIALS
Was this lesson helpful?
Thank you for your feedback!