Overview
This article provides a brief overview of how to use Interactions within your content. This goes over how you can make any widget clickable, or adding mouseover effects and animations. For more specific details on the interaction types, each section has a link to an article with more details.
To add an interaction on any widget, you just need to select the widget and go to the Interact tab. From here you will click on the plus icon to get started. Please note that if your widget is not on a board, you will not see this plus icon.
In general, an interaction is made from having a Trigger and an Action. For example, you might have the trigger as "On Click", and the action is "Open URL". An alternative example could be the trigger for "On Mouse Hover", with the action as "Change Opacity". So combining a trigger and an action can lead to creative complex interactive designs. You can see two different examples here:
Triggers
For full information on using the different Trigger types, please review the following article: Fastr Workspace - Interaction: Triggers
- Click: Triggers the action when the user clicks on the widget.
Mouse Over: Triggers the action when the user hovers the mouse over the widget.
Mouse Leave: Triggers the action when the user's cursor moves away from the widget.
Enter Viewport: Triggers the action when the widget becomes visible within the user's screen (viewport) as they scroll.
Immediately: Triggers the action as soon as the page loads, without any user interaction.
Labeled: Triggers an action on another widget by referencing its label.
Y Threshold – Triggers an action when the page is vertically scrolled to the specified percentage value.
Basic Actions:
For full information on the basic actions, please review the following articles:
Fastr Workspace - Interactions: Basic Actions
Fastr Workspace - Interactions: Overlays
Open URL: Opens a specified URL when the configured trigger action is performed on the widget.
Open Lightbox: Displays a lightbox when the assigned trigger action is executed on the widget.
Change Scene: Transitions to the designated scene when the trigger action is triggered on the widget.
Open Overlay: Opens the selected overlay when the configured trigger action is performed on the widget.
Close Overlay: Closes the currently active overlay when the corresponding trigger action is executed.
Jump To: Jumps to a specific scene when the defined trigger action is performed on the widget.
Animations:
For full information on the animations available, please review the following article: Fastr Workspace - Interactions: Animations
Slide In: The scene or widget will slide into view when the configured trigger action is performed.
Slide Out: The widget will slide out of view when the configured trigger action is performed.
Move: The widget will move to a new position when the trigger action is executed.
Rotate: The widget will rotate when the configured trigger action is performed.
Resize: The widget will change its size (width and/or height) when the trigger action is executed.
Change Opacity: The widget's opacity will change—becoming more transparent or visible—when the trigger action is performed.
Modifiers & Complex Actions:
For full information on the more advanced actions, please review the following articles:
Fastr Workspace - Interactions: Advanced Options
Fastr Workspace - Interactions: Labels
Await Trigger: This is used to add additional triggers to your interaction.
Delay: Delays the execution of the action for a specified time after the trigger action is performed.
Repeat: Repeats the action a set number of times after the trigger action is performed.
Sequence: Executes multiple actions in a defined order after the trigger action is performed.
Activate Label: Triggers an action on another widget when the first widget is clicked or activated. This works by targeting a shared label between widgets.
Execute JS: Executes the custom JavaScript that has been set up on the widget when the trigger action is performed.
Custom Action: Runs a predefined custom action associated with the widget when the trigger is activated.
Change Scroll Factor – When a user scrolls the page, elements can move at different speeds instead of moving exactly with the page. The Scroll Factor determines that speed.
If you have any follow-up questions or need further assistance, please feel free to reach out to us at support@getfastr.com — we're happy to help!
Comments
0 comments
Please sign in to leave a comment.