Link to the plugin page: https://zeroqode.com/plugin/1565018631678x961894054004577700
Demo to preview the plugin:
Introduction
Looking for Facebook-style GIF preview elements for your Bubble app? Use this handy no-code plugin! Simply place the element on the page, choose a data source, and you’re all set.
How to setup
- Add the GIF Preview Element:
- Drag the GIF Preview element from the plugin section in the Bubble editor to your page.
- Customize settings: Adjust its size, placement, and behavior in the editor as needed.
- Usage:
- Link it to a GIF file.
- Use workflow actions to control playback.
- A GIF Preview GIF Play
- Trigger: This event is triggered whenever a GIF starts playing.
- Use Case: Useful for tracking when a GIF starts or for initiating other workflows upon playback.
- A GIF Preview GIF Stop
- Trigger: This event is triggered whenever a GIF stops playing.
- Use Case: Useful for workflows like resetting the interface or logging user interactions.
- Play GIF A GIF Preview
- Description: Starts playing the GIF linked to the GIF Preview element.
- Usage: Add this action in a workflow to dynamically play a GIF.
- Stop GIF A GIF Preview
- Description: Stops the playback of the GIF in the GIF Preview element.
- Usage: Add this action in a workflow to dynamically stop a GIF.
Configure Actions and Events:
Events
Actions
Plugin Element Properties
Gif Preview
Fields:
Title | Description | Type |
Autostart | Show gif with autostart. | Checkbox (yes/no) |
Gif source | The gif link | Image |
Button Color | Setting the background color for the button. | Color (optional) |
Button radius | Setting the radius for the button. | Number (optional) |
Keep aspect ratio | The measures will be set depending on the gif’s proportions to maintain its quality. | Checkbox (yes/no) |
Border Color | Setting the color for the border. | Color |
Element Actions
- Play GIF - Action to play a gif.
- Stop GIF - Action to stop a gif.
Element States
Title | Description | Type |
Is Playing | Here the plugin setting is kept | Checkbox (yes/no) |
Is_hover_recently | Indicates if the user has recently hovered over the element. | Checkbox (yes/no) |
Element Events
Title | Description |
Gif Play | Function of play a gif |
Gif Stop | Function of stop a gif |
