Hi Bubblers!
February is ending and we are glad to announce that one more plugin has been added to our collection - Rapid RG Snap plugin!
This plugin is designed to enhance your Bubble application by transforming standard repeating groups into scroll snap repeating groups.
By integrating this plugin, you gain access to several valuable events including “Is Visible”, “Is Not Visible”, and “Loaded”.
These events are triggered under specific conditions, giving you greater control and interactivity within your application.
Words can not describe much of how this plugin works, better dive in and try it out yourself 
Try it out on:
Find more info on:
If you have suggestions on how we can improve it more, drop us a message here
Have a great day!
Regards,
Rapid Dev Support Team
3 Likes
Hey hoping you could help with an issue. I’ve purchased the plugin and I’m using it to achieve a tiktok style effect with video posts (via api.video player). My issue is that the “isVisible” value is incorrect. When I load my repeating group (set to 100% height) the isVisible value is 2 instead of the current cell index of 1.
To test this I am setting a state value for the isVisible cell and displaying both current cell index and isVisible state value. As I scroll the values increment by one until the last cell where the isVisible repeats the previous value and matches index.
Example:
Index: 1 | IsVisible: 2
Index: 2 | IsVisible: 3
Index: 3 | IsVisible: 4
Index: 4 | IsVisible: 4
I am not doing any math on the values so it seems isVisible is detecting the next cell as visible even though I have confirmed that my cell is 100% of the window. Thanks in advance.
I’m not sure what the chances are of getting a response on this old thread so I’m looking for alternatives. I’ve also noticed that this plugin triggers an event for EVERY row that is not visible and not just the one that lost visibility. This makes it pretty hard to play/pause videos going in and out of focus.
The Zeroqode - Repeating Group Visibility Detector seems to do this so I’m considering just using JavaScript to do the scroll-snapping and that plugin to do visibility. I know about the orchestra plugin, but I think it requires all rows to load fully. Any suggestions appreciated.
Hi @rob.lewis, thanks for your message.
For a better understanding of your case, please add our Support Team email to the list of collaborators to your application and provide us a link to your application as well as how we can get to the mentioned setup.
This will allow us to check your settings and run some tests to fix the mentioned problem.
To add our Support Team as a collaborator, you need to do the following steps in the Bubble Editor:
Settings > Collaboration > Add email mkoss@rapidevelopers.com
Note: disregard the warning message regarding the plan, as we are an agency and you can easily add us to your collaborators.
Looking forward to hearing from you soon.
Regards,
Rapid Dev Support Team
Hey thanks for the reply. Maybe there is some troubleshooting we could do first before I give you the keys to my house to go walking around? My question might also be relevant to others which is likely why you started a forum post.
For instance does the plugin start at 1 in your demo app or 2 as I’m finding? And does the plugin fire the notVisible event on all rows or just the row that became invisible? I will follow with an email.
Many thanks.
@rob.lewis thanks for your reply.
Sure, please check out the demo builder, we shared there some instructions on how RG Snap works.
In the demo page, we use a source of 12 images for the showcase, and each image is displayed correctly, also events are fired one by one when the image is visible only, and there is only one trigger not all of them at the same time.
Here is a screenshot from the demo of how the index is shown on the demo page, to be sure that it corresponds with data from source, not from a state from plugin.
Also, following your description, we would like to mention that our plugin doesn’t provide any state “isVisible”, so most probably this is a custom state created within the app and is using some sort of custom logic to display that number.
Hope this helps. If there is anything else that we can help with about our plugin, please let us know.
Regards,
Rapid Dev Support Team
Asking $30 for a plugin that only adds this CSS to the page is crazy
repeatingGroup.css({
overflowY: 'auto !important',
scrollSnapType: 'y mandatory',
scrollPadding: 0
});
repeatingGroup.children('.group-item').css({
scrollSnapAlign: 'center'
});
2 Likes
Hi @Ericberg, thanks for your comment.
There is much more behind that so the price is not a random one.
But you can use the mentioned code and see how much functionality it offers
Regards,
Rapid Dev Support Team
Thanks for your time replying. I did notice that my RG Snap element wasn’t centered within the Group (set to Align to parent) so, after centering it I did get the correct cell index when setting state using the “is visible” event. I’m not sure why the layout mattered, but “is visible” event works. (The element must have been extending beyond the margin)
However, I am also setting a state using the “is not visible” event. And I am finding that this event runs once for every row that is not visible.
For instance I have 10 rows in my repeating group and set a state variable for the row index that is not visible. When I scroll from row 1 to row 2, instead of getting a state of 1 as expected because it was just hidden, I watch the state cycle through 1,3,4,5,6,7,8,9 and stop at 10. (Also witnessed by stepping through debug_mode.) Is the intended function to identify all rows not visible, or only the row that lost visibility?
Thanks again. I appreciate your help and I think your plugin will work out fine.
Hi @rob.lewis, thanks for your reply, and glad to hear that part of the mentioned issue is solved.
Yes, you are right, the “Is not visible” event is running multiple times, and it is supposed to do that because you are using the element in a repeating group.
Because of that you have multiple copies of the element in that repeating group, and each copy has its own events, that’s why there is only one event 'Is visible" and a lot of “Is not visible” to get track of one cell that is visible and multiple that are not.
Hope this helps. Please let us know if there is anything else that we can help with about our plugin.
Regards,
Rapid Dev Support Team
Would it be possible to add an event to catch the change of status of the currently visible row to not visible (e.g. “element was hidden”)?
My specific case is to pause a video player once it is scrolled off screen and becomes not visible. I suppose a work around would be to store a state list of each row that gets triggered as visible and only perform the “is not visible” workflow if the current index is in the list but that seems prone to race case issues. Any suggestions appreciated.
Hi @rob.lewis, thanks for your inquiry.
Let us check this with the developer team. Once we get any feedback, we will let you know asap.
Thank you for understanding.
Regards,
Rapid Dev Support Team
Hi @rob.lewis, good news here!
We worked this out, now after the update the plugin will trigger the ‘is not visible’ event only for the element that is going invisible next scroll, not for all cells from repeating group.
To try it out, please update the plugin on your end!
Hope this helps your setup. In case of any other questions and suggestions, you know where to find us
Happy Holidays!
Regards,
Rapid Dev Support Team
1 Like
This is super cool guys! Gonna give it a try.
Really appreciate the responsiveness.
Thank you.
1 Like
@rob.lewis you’re welcome
Let us know if there is anything else that we can help with 
Btw, if you like our plugin, we would be grateful if you could rate it by going to the Plugins tab in Bubble Editor. Find the plugin by name and give it as many stars as it deserves! 
The more feedback we get, the more motivated we are to make things better in Bubble!
Have a nice weekend ahead!
Regards,
Rapid Dev Support Team
