Transform your Bubble repeating groups with Rapid 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
Enables scroll snapping for repeating groups.
Provides visibility detection: "Is Visible", "Is Not Visible".
Detects when the repeating group is fully loaded.
Tracks when scroll-based animations are completed.
Easy-to-use reset scroll action for programmatic control.
Prerequisites
Before integrating the Rapid 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 Rapid 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
Go to the Plugin Tab
Open your Bubble Editor.
Navigate to the Plugins tab on the left panel.
Add Plugins
Once in the Plugins tab, click the Add Plugins button.
Search for the Plugin
Use the search bar to type Rapid RG Snap.
Locate the plugin in the search results.
Install/Buy
If the plugin is free, click Install to add it to your application.
For a paid plugin, click Buy and follow the purchase instruction.
Payment Information (For Paid Plugins)
If the plugin is a paid one, fill in your payment details and make payment.
Charges will be added to your Bubble billing account.
Remember, if you unsubscribe from the plugin shortly after installation, charges will be prorated based on the days used.
Plugin Installed
Once installed, the plugin will appear under the Installed Plugins list in your Bubble Editor.
Step 2: Add the RG Cell Snap Element
Open the Design Tab.
Go to the Design tab in your editor.
Locate Your Repeating Group.
Find or create the Repeating Group you want to enhance with scroll snapping.
Drag the Plugin Element.
From the visual elements list, drag and drop the RG Cell Snap element into the same container or group as your repeating group (not inside each cell).
Step 3: Assign a Unique ID
Enable ID Attributes.
If not already enabled, go to Settings → General and check “Expose the option to add an ID attribute to HTML elements”.
Set an ID.
Click the RG Cell Snap element.
In the ID Attribute field, assign a unique name, e.g., cell-snap.
This ID will be used later if you want to reset the scroll via workflow.
Step 4: Set Up Workflows
Go to Workflow Tab.
Open the Workflow tab.
Choose an Event.
Click “Add an Event” → Select “A RG Cell Snap element is visible / not visible / loaded / animation finished”.
Trigger Actions.
Add actions based on visibility or scroll position.
Example:
When animation finishes → Reset scroll or navigate.
Step 5: (Optional) Reset Scroll via Workflow
Create a Workflow.
Go to the Workflow tab → Click Add an Action.
Use Plugin Action.
Choose the plugin action:
RG Cell Snap - Reset Scroll
Configure Input.
Enter the ID of the RG Cell Snap element you previously assigned (e.g. cell-snap).
This is useful if you want to return the user to the first RG cell or reset their scroll position after a specific action (e.g., filter applied, form submitted).
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.
Changelogs
Update 22.04.25 - Version 1.5.0
Minor Update (Marketing Update).
Update 17.02.25 - Version 1.4.0
Minor update(Marketing update).
Update 17.02.25 - Version 1.3.0
Acquired by Zeroqode.
Update 26.12.24 - Version 1.2.0
Trigger "Is not visible" for currently visible cell that is going insivible.
