Setup Instructions
This are step-by-step instructions on how to get the plugin working on any Bubble App.
[ml][ol][li indent=0 align=left]Add this plugin to your application.[/li][li indent=0 align=left]Add a Workflow action, for example 'When page is loaded'.[/li][li indent=0 align=left]Search in the actions for 'Hover Effect'.[/li][li indent=0 align=left]Go to Settings, then go to General -> General Appearance and check the option Expose the option to add an ID attribute to HTML elements.[/li][li indent=0 align=left]Go to the Design tab and select any element. Scroll to the bottom of the Property Editor and define an ID (for example button_!).[/li][li indent=0 align=left]Go back to Workflow tab and write the ID you just defined in the Hover Effect action, under the Button ID property.[/li][li indent=0 align=left]Set a color for the effect.[/li][li indent=0 align=left]Choose any of the available effects for the Hover Effect property (for example Fill Top).[/li][/ol][/ml]
Documentation
[b]Hover Effect[/b] is the only action given in this plugin. You need to call the action in the Workflow to animate any given element by ID.
This action contains the following properties to be used: [ml][ul][li indent=0 align=left][b]Button ID:[/b] the defined ID of a Bubble element. To be able to add an ID to the element you will first need to expose the option in Settings -> General -> General Appearance[/li][/ul][/ml][quote][color=rgb(187, 187, 187)]Please notice, even though in the Demo all elements have the same ID, this is a really bad practice as explained by [/color][color=rgb(102, 163, 224)][url=https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id][u]Mozilla[/u][/url][/color][color=rgb(187, 187, 187)]: "The id global attribute defines an identifier (ID) which must be unique in the whole document."[/color][/quote]
[ml][ul][li indent=0 align=left][b]Color:[/b] define the color of the animation. If the animation is border-based please use [i]Border Color[/i].[/li][/ul][/ml] [ml][ul][li indent=0 align=left][b]Animation:[/b] select the desired animation in the dropdown options. The following options are available:[/li][ul data=1][li indent=1 align=left]Fill Top[/li][li indent=1 align=left]Fill Right[/li][li indent=1 align=left]Fill Bottom[/li][li indent=1 align=left]Fill Left[/li][/ul][/ul][/ml] [ml][ul][ul data=1][li indent=1 align=left][color=rgb(51, 51, 51)]Reveal Top[/color][/li][li indent=1 align=left]Reveal Right[/li][li indent=1 align=left]Reveal Bottom[/li][li indent=1 align=left]Reveal Left[/li][li indent=1 align=left]Reveal Middle[/li][/ul][/ul][/ml] [ml][ul][ul data=1][li indent=1 align=left][color=rgb(51, 51, 51)]Border Top[/color][b][color=rgb(51, 51, 51)] [/color][/b][/li][li indent=1 align=left]Border Right[/li][li indent=1 align=left]Border Bottom[/li][li indent=1 align=left]Border Left[/li][/ul][/ul][/ml] [ml][ul][ul data=1][li indent=1 align=left]Slide Top[/li][li indent=1 align=left]Slide Right[/li][li indent=1 align=left]Slide Bottom[/li][li indent=1 align=left]Slide Left[/li][/ul][/ul][/ml] [ml][ul][li indent=0 align=left][b]Border Color: [/b]if animation is border-based set the color of the animation (border).[/li][/ul][/ml] [ml][ul][li indent=0 align=left][b]Border Radius: [/b]if animation is border-based set the radius in (px). Only numbers are valid.[/li][/ul][/ml] [ml][ul][li indent=0 align=left][b]Border Width:[/b] if animation is border-based set the width in (px) of the borders. Only numbers are valid.[/li][/ul][/ml] [quote][color=rgb(136, 136, 136)]Border-based animations: [/color][i][color=rgb(136, 136, 136)]Border Top, Border Right, Border Bottom, [/color][/i][color=rgb(136, 136, 136)]and[/color][i][color=rgb(136, 136, 136)] Border Left[/color][/i][/quote]