Overview
This article goes over some of the more complex interactions that are available. This includes the ability to modify your other actions by adding delays, loops, or sequenced events. Using these options can change the timing of your animation to create unique effects. This article will also discuss the ability to execute JavaScript or use a Custom Action. For general information about adding an interaction, please review the following article: Fastr Workspace - Interactions Overview
To add an interaction to 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.
Advanced Actions:
The following screenshot will show the advanced actions that are covered in this article. Because most of these actions require a follow-up action, we will also cover the steps for adding actions as part of an action. For information on how to use the animations referenced in this article, please review here:
Fastr Workspace - Interactions: Animations
-
Delay - The delay action is fairly straightforward and can be used to add a pause before the next action occurs. For example, you might set up an action with a 3-second delay before an element begins to move or slide in. Therefore, you can click the plus icon to add an additional animation after a delay. You can see an example here:
-
Repeat - Similar to the delay action, repeat is also a simple action that can be used to repeat the next action that occurs. For example, you might want to set up an action where a widget will rotate by 45 degrees, and this action will continuously repeat. Therefore, you can click the plus icon to add an additional animation after the repeat action. You can see an example here:
-
Sequence - The sequence action can be used to determine the set order in the next group of widgets will occur. By default, actions will occur at the same exact time. By using the sequence option, you can instead make the actions occur in a specific order. Please review the following example experience, where you can see how a sequence can work:
Example Experience
So the screenshot here shows an example of how the sequence feature could be used effectively to cause a different animation: - Activate Label - The label action has a separate article that can be reviewed here: Fastr Workspace - Interactions: Labels
- Execute JS - This option can be used to execute some JavaScript that will occur when a user triggers this action.
- Custom Action - This option will typically be used to create custom functionality in your account. A common implementation would be integrating with your site's Quickviews. Therefore, using a Custom Action typically requires a bit of set-up from our solutions engineers, who will provide instructions on how to use the custom action.
- Change Scroll Factor - Change Scroll Factor (%) controls how much an element moves in response to page scrolling, expressed as a percentage of the scroll distance. When the user scrolls the page vertically, the element moves according to the percentage value set in the Scroll Factor. This allows elements to move slower, which is commonly used to create parallax effects and layered motion. This setting helps in creating parallax effect. Here is the article for reference: Fastr Workspace - How to create Parallax effect
How It Works
The percentage value determines the relationship between the page scroll and the element’s movement.
-
100% Scroll Factor
The element moves exactly the same distance as the page scroll.
No parallax effect is created.
-
Less than 100% (e.g., 50%)
The element moves slower than the page scroll.
Creates a background-like parallax effect.
-
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.