Link to the plugin page:
Demo to preview the plugin:
Introduction
Transform your Bubble repeating groups with RG Snap, a powerful plugin that adds scroll snap capabilities and introduces visibility-based events to enhance interactivity and UX. This plugin allows you to monitor when specific repeating group cells are visible, not visible, fully loaded, or when their animations finish.
Key Features
Prerequisites
Before integrating the RG Snap plugin into your Bubble app, ensure the following setup is in place:
- Bubble App: You have a Bubble app with at least one repeating group (RG) element to enhance.
- Plugin Installed: The RG Snap plugin is installed from the Zeroqode Plugin Store.
- Optional: Familiarity with Bubble’s workflow editor will help in triggering actions like Reset Scroll or reacting to visibility changes.
How to setup
Step 1: Installation
Step 2: Add the RG Cell Snap Element
Step 3: Assign a Unique ID
Step 4: Set Up Workflows
Step 5: (Optional) Reset Scroll via Workflow
Plugin Element Properties
RG Cell Snap – Element Fields
Add this element inside a repeating group cell. It emits visibility and animation events as the user scrolls or as the repeating group loads.
Element Fields
Note: This element has no user-configurable fields in the Bubble editor.
Field Name | Type | Description |
(None) | – | This element has no exposed input properties. Use associated events and actions to control its behavior programmatically. |
Element Events
You can trigger workflows using these events:
Title | Description |
Is not visible | Fires when the element enters the viewport. Useful for lazy-loading data or triggering animations. |
Is visible | Fires when the element leaves the viewport. |
Loaded | Triggers once the element is initialized inside a cell. |
Animation finished | Fires when any associated animation completes. |
Plugin Actions
[RG Cell Snap] Reset Scroll
Resets the RG Snap scroll position to its initial state.
Title | Description | Type |
RG Cell Snap ID | The ID attribute of the snap-enabled element you want to reset | Text |
💡 Example Use Cases
- Track visible cells: Use the “Is Visible” event to detect which RG items are in view (for analytics or progressive loading).
- Animate only once: Combine “Loaded” with “Animation Finished” to prevent repeated animations.
- Reset scroll position: After applying a filter or sort, use the reset action to scroll back to the top.
