In the next article, we will start discussing animations and interactions.
First, you will have to switch to INTERACT mode by clicking on interact in the bottom tool bar. A menu on the right will open, displaying all the interactions we will apply in the project.
For each interaction we want to add to the project, we can assign a unique name, allowing us to easily identify and edit it when needed.
After adding a name for the interaction, click on the settings icon to open the Interaction settings.
Creating an interaction consists of four simple steps that need to be defined for each interaction.
Trigger-Define the Trigger for the Animation/Interaction. The trigger is usually a specific element that activates the animation or interaction. You can select a specific element within the project, choose based on type, or use a class if one has been assigned to the element.
Event – Define the Action to Be Performed For example: mouse click, mouse hover, page load, scroll, etc.
Target – The Target Element That Will Be Activated as a Result of Your Selection. For instance, if you chose a mouse click (Event) to open and close a menu, this is the step where you select the target element that will be activated.
Action – Configure the Action Itself. For example, if you chose for a menu to open and close on a click, at this stage, you can decide if there is a specific delay, how the menu will open and close, and so on.
Liked it? Dive into our Academy and learn how to add more animations - effortlessly and fast.