How to create nice swipe action workflows for your mobile apps
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.
That’s it. Keep it simple!
Damian