<aside> ✅ Link to plugin page: https://zeroqode.com/plugin/1689629778022x943876174373457200
</aside>
<aside> ✅ Demo page: https://ezcodedemo4.bubbleapps.io/animated_annotations
</aside>
<aside> ✅ Bubble Editor: https://bubble.io/page?version=live&id=ezcodedemo4&name=animated_annotations&tab=Design&subtab=Plan&type=page
</aside>
Highlight text with animated drawings just like with a highlighter or a pen.
Different ways of application:
The plugin contains a Animated Annotations visual element that should be used on a page.
| Title | Description | Type |
|---|---|---|
| Settings if you want to trigger it on hover, otherwise, use Animate action. | ||
| Trigger on hover | When enabled (true), the annotation will only show when the user hovers over the element with the mouse. Otherwise, the annotation is static or controlled by other triggers. | yes / no |
| Elements ID | Text elements IDs to animate on hover event. Separate each ID by a comma. | text |
| Animate Method | Determines the type of annotation to be created. It could be a string representing one of the annotation styles supported by RoughNotation, such as 'underline', 'box', 'circle', 'highlight', or 'strike-through'. If 'bracket' is chosen, additional properties for brackets will be used. | Dropdown |
| Color | The color of the annotation. Users can input any valid CSS color value to customize the appearance of the annotation, such as 'red', '#FF0000', 'rgba(255, 0, 0, 0.5)', etc. | color |
| Padding | The padding around the annotated element, specified in pixels. It creates space between the annotated element's content and the annotation itself. | number |
| ---- Bracket method settings ---- | ||
| Bracket Position | NOTE: Only for Brackets method, for any other method, it will not influence. Type witch side you want to annotate brackets separated by a comma. Example: left,right or top,bottom or left,bottom,ritght etc. | text |
| Bracket Width | NOTE: Only for Brackets method, for any other method, it will not influence. Bracket width in pixels, for example " 3 ". | number |
| ---- Auto animate when it is in center of viewport ---- | ||
| Animate in viewport | It will trigger animation when the selected element will be in the center of the page. | Checkbox |
