Want to build this on Bubble?
Let’s go:
1) Go to your app settings / general and check “Expose the option to add an ID attribute to HTML elements.”
2) Build your repeating group and group all the content inside. Give the new group a unique ID Attribute that references the cell’s index. E.g.
3) Install the Swipe to Workflow Action plugin (or a similar one, but make sure it allows you to reference individual elements; I’m not affiliated), drag the Swipe_detector element into your repeating group, and set it to reference the group created in the previous step:
4) Create a delete button inside the repeating group and set it to not visible on page load:
Your element tree should now look something like this:
5) Install the Toolbox Plugin.
6) Add the following workflows:
6.1) Swipe left:
$(swipe…).animate({marginLeft: "-75px"}, 300, 'swing');
6.2) Swipe right:
$(swipe…).animate({marginLeft: "0px"}, 300, 'swing');
That’s it. Have fun playing around.
Last but not least
Do you want me to write about a specific topic, or do you have an awesome Bubble hack you would like to share? I'd love to hear from you, and I'm looking forward to engaging in the post comments or the Bubble forum.
That’s it. See you in two weeks.
Keep it simple!
Damian
A Video for this will be appreciated fr...
For the dumb ones like me, who cannot comprehend simple texts :()
Really enjoyed the insights on building swipe-to-action features in Bubble! For those looking to take it further, it’s interesting to see how similar principles are applied when you create an app like Letgo, combining smooth interactions with a marketplace experience. Check out this guide for more details: https://www.cleveroad.com/blog/how-to-make-an-app-like-letgo/