Link to the plugin page:
Demo to preview the plugin:
Introduction
The Flip Cards For Any Element plugin enables you to add dynamic flip animations to any element in your Bubble application. You can specify front and back elements and trigger a smooth flip effect based on hover, click, or manual actions. This plugin is versatile and can be used with text, images, and custom HTML elements.
See Key Features
Prerequisite
- Bubble Account: An active Bubble.io account is required to install and use the plugin.
- Plugin Installation: The plugin can be installed directly from the Zeroqode Plugin Store or from the Plugins section of your Bubble Editor.
- Ensure the ID attribute option is enabled in your Bubble editor:
- Go to Settings → General.
- Scroll to the bottom and check Expose the option to add an ID attribute to HTML elements.
- For instructions on setting the ID attribute for a Bubble element, please refer to this https://forum.zeroqode.com/t/how-to-add-id-attribute-to-html-elements/469.
How to setup
Step 1: Installation
Step 2: Add the Plugin Element to Your Page
Step 3: Set Up a Workflow Example
Plugin Element Properties
Flip Card (Append) copy
Fields:
Title | Description | Type |
Element ID | Unique identifier for the Flip Card | Text |
Front Element ID | ID of the front element | Text |
Back Element ID | ID of the back element | Text |
Trigger | Available options: hover, click, manual | Dropdown |
Reverse? | Flips the card in reverse mode | Checkbox (yes/no) |
Axis (x or y) | Defines the flip direction | Text |
Speed | Flip animation speed (in milliseconds) | Number |
Element Actions
- Flip - Flip the card ## Flip Card (HTML)
Fields:
Title | Description | Type |
Element ID | Unique identifier for the Flip Card | Text |
Front HTML | Front HTML content | Text |
Back HTML | Back HTML content | Text |
Trigger | Available options: hover, click, manual | Dropdown |
Reverse? | Flips the card in reverse mode | Checkbox (yes/no) |
Axis (x or y) | Defines the flip direction | Text |
Speed | Flip animation speed (in milliseconds) | Number |
Element Actions
- Flip - Flip a Card
Title | Description | Type |
Element ID to Flip | Specifies the element to flip | Text |
