Interactions consist of triggers and actions. For example, you can specify what happens when an item is clicked, such as playing an animation.
Interactions are applied to the selected class. For instance, if you have a class named ‘product image’, adding a mouse click trigger and associating it with an animation action will apply this interaction to all elements with the ‘product image’ class.
Let’s imagine there are three elements on the page with the ‘product image’ class. In this case, clicking on the first element with the ‘product image’ class will trigger the animation on that element, but the other product images won’t trigger the animation.
| Event | Description |
|---|---|
| Mouse click | Triggered by a mouse click. |
| Mouse enter | Triggered when the mouse enters an element. |
| Mouse leave | Triggered when the mouse leaves an element. |
| Page scroll | Triggered when the page is scrolled. |
| Page load | Occurs when the page finishes loading. |
| Init | Triggered on the initial start. |
| State change | Occurs when there is a state change. (just in component) |
| Action | Description |
|---|---|
| Add class | Adds a specific class. |
| Remove class | Removes a specific class. |
| Condition | Check a specific condition. |
| Set text | Sets or changes text. |
| Animate | Adds animation. |
| Set state | Sets or changes state. (just in component) |
| Trigger event | Triggers another event. (just in component) |