Transitions in Bubble

[evatindi]

Hi, am looking to do the transitions on the repeating group shown in this site…The “Shop Jumpsuits”, “Shop Tops” and “Shop Dresses” repeating groups, how can i achieve that with Bubble?
http://www.shopnewlevel.com/

[sridharan.s]

I think there’s a way to make that transition work, but it’ll take quite a bit of work to set up and would require you to set-up a separate transition for each of the 4 lines, and 1 separate one for the image.

Here’s the foundational idea for how to execute it:

Move image position with workflow

There’s another really cool way to do this. Here’s how it works. If you want to move an element left 20 pixels, then put a group around the element. Make sure the group is flush with the element on the right side and allow for 20+ pixels of room on the left. Then, set the group to have a 20 pixel border on the right side (based on some condition). Set the border color to 100% transparency. There you go. It’ll move the element to the left by 20 pixels based on whatever condition you set. …

You could use the above approach to create the lines that slide in / out.

You may be able to do something similar for the zooming of the image by having the image take up the full size of a group and then create invisible borders that slide out on hover. Furthermore, you’ll want a white border around the image so the part that’s visible remains the same size.

Hope this helps!