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

👉 twitter.com/DamianJanzi

👉 bubblehacks.io

Leave a comment

bubbleHacks

How to create nice swipe action workflows for…