Link to the plugin page: https://zeroqode.com/plugin/focus-elements-plugin-for-bubble-1739741780741x472912382923754500
Demo to preview the plugin:
Introduction
This plugin allows you to set focus to elements in your app by displaying a circular animation around the element.
You can choose between 5 different effect types, specify the color, the radius of the animation and the total duration.
This plugin can be used to draw the user’s attention to a certain area/input/text etc. within your app. You can trigger a “Focus Element” Action within your workflows.
How to setup
- Enable ID Attributes
Go to the settings page in your editor. Under the General tab click on the checkbox “Expose the option to add an ID attribute to HTML elements”
- Trigger the Focus Effect in a Workflow
- Go to the Workflow tab.
- Add a new action where you want to draw user attention (e.g., after clicking a button or validating a form).
- Choose the action "Focus Effect" under the Plugins category.
- Configure the Focus Effect Action
- Element ID: enter the ID of the element you want to highlight.
- Effect: choose the visual effect to apply.
- Color: define the highlight color using a hex code.
- Radius: set the radius of the focus effect in pixels.
- Duration: set how long the effect should last in milliseconds.
Plugin Actions
Focus Effect
The “Focus Effect” in a software plugin or API refers to the ability to emphasize or highlight a specific element or area within a user interface by adjusting its visual appearance or behavior.
Title | Description | Type |
Element ID | Specify the Element ID of the element that should be focused on. | Text |
Effect | Choose one of the effects. Available options: drop, splash, drops, pulse, orbit | Dropdown |
Color | Choose the color of the focus effect ring. | Color |
Radius | Choose the radius of the effect in pixels, ie. how far out the effect should reach. | Number |
Duration | Specify the duration of the effect in milliseconds | Number |
