The Interactions toolbox in the Designer is where you can create simple and intricate causations using triggers and animations. An initiator — such as tapping an element or moving down the page — initiates an animation or can even animate continuously 1 or multiple elements on the page.
In this tutorial, you’ll understand:
- Varying kinds of initiators
- How to set up an initiator
- How to configure an animation
- About target actions
- How to eliminate and erase unused initiators and animations
Varying kinds of initiators
The Interactions toolbox is categorized into two main sections: Component triggers and Website triggers.
Component triggers
You can insert component triggers in the Component triggers division of the Interactions toolbox. These initiators instigate an animation when a website visitor interacts with a component — like hovering over or tapping.
To add a component trigger:
- Choose the component (e.g., segment, button, division block, etc.) on the canvas you wish to utilize as the component trigger
- Press the “plus” on the right of Component trigger
Subsequently, you can select a component trigger from the compilation. Also, you can float over each option to gain more information.
The obtainable component triggers are:
- Click on mouse (tap)
- Hovering mouse
- Moving mouse over component (continuous)
- Scrolling into view
- While scrolling in view (continuous)
Notice that component triggers can animate 1 or multiple element(s) on the canvas. Put differently, a component acting as the trigger doesn’t always need to be the target of an action — it can be the trigger that animates a distinct component. For example, you can designate a button component as the trigger component which, when tapped, causes an image component to rotate in a circle.
Unique component triggers
You can also append custom animations for when website visitors interact with navigation bars, drop-downs, tabs, and sliders. You can reach these trigger varieties when you pick the corresponding component (e.g., navbar, drop-down, etc.) on the canvas.
- Navbar opens — Select the Navbar in the Navbar component. The animation activates when the navbar menu opens/closes
- Dropdown opens — Select the Dropdown in the Dropdown component. The animation activates when the drop-down menu opens/closes
- Tab change — Pick the tab link inside the Tabs component. The animation activates when the tab link is visible (active) or invisible (inactive)
- Slider change — Pick 1 of the slides in a Slider component. The animation activates when a slider slide comes into view or goes out of view
Website triggers
You can insert component triggers in the Component triggers section of the Interactions toolbox. These triggers commence an animation when there’s a change in the website state — such as when the website loads.
To add a website trigger, press the “plus” on the right of Website trigger.
The website triggers are:
- Moving mouse in viewport (continuous)
- Whilst website is scrolling (continuous)
- Website load
- Website scrolled
How to set up an initiator
After you pick the sort of initiator in the Interactions toolbox, you can define the action you wish to occur after the initiator. The action choices you possess rely on the kind of initiator you have selected. For example, if you select the “Mouse click (tap)” component trigger, you can select the actions that occur on 1st and 2nd tap.
Initiator configurations
By default, when you designate an initiator on a component, the interaction solely transpires when you interact with that specific component. The interaction will occur on all device breakpoints.