Move image position with workflow

You’re welcome.

It should work in all directions. You just need to make sure 1) the group is flush with the opposite side and 2) there’s enough extra room within the group on the side where you want it to move.

Note - if you want to move a group left and then right again (later) you can just have the border disappear to move it back. You could also start with a transparent border and then have it shrink to size 0 to make the element move toward that side.

1 Like

Brilliant!!

This works great!!! In combination with transitions it gets even better!!

However, I have found a bug: When I hover over the inside image (after I have changed the border), the images moves as expected!

Great, glad it’s working for you!

I don’t follow your bug explanation. Could you share a video or a link to either your editor or the app?

Well that’s pretty neat! :slight_smile:

It sound very easy, but don’t get it. Any link example? I’m sure I’m trying something harder 'how to move a button or picture inside a group.


John, your screenshots look fine. Perhaps you’re missing another step.

Here’s a quick demo in the forum app.

Editor: https://bubble.io/page?type=page&name=slide_element&id=forumapp3&tab=tabs-1
Preview: https://forumapp3.bubbleapps.io/version-test/slide_element?debug_mode=true

Very wyse… and yes, I was completely missing it :blush:
Thanks for the example. You find this alone or I’m missing some doc? :))))

I found it alone. Wished there was more / better documentation but seems like the Bubble team is focused mostly on improving the product (which is probably the best use of their limited resources anyway). The forum is a pretty good place to turn too.

In my experience, learning Bubble is like learning a development language. So, it takes a while to get going with it at first. But, once you get the hang of it, then you can really coast.

Additionally, I’ve used 1:1 sessions with @levon to build our app – and that was a great way to quickly learn all of the foundational items because I could see Levon do things and ask him why, etc. Also, CoBubble seems to be a great resource when you get stuck and need some help.

2 Likes

Hahaha You cheat with Levon :wink: My one on one session starting next week.
And yes, it is a totally full development language. I will never go back to lines of code. Even my team (i’m technically not a programmer) work on Bubble and they love it (they don’t want to admit it) :slight_smile:
Bubble is a difficult learning curve to grab concept, and it take some (lot) practice. But we have to admit it, we love it!

Just added the hover effect on the button itself. :slight_smile:


1 Like

Hey Scott! amazing solution you found ! i wouldn’t have thought of such an option for moving images :slight_smile: well done!

Thanks Levon. The student becomes the master :wink: Okay, not really. But less of a student, finally. lol.

Will have to show you our updated app at some point. It’s getting pretty slick.

Even thinking about running a few virutal speed networking events for Bubblers to meet one another. Would be a great way to help people in the community meet each other and also show them a few cool interactions and elements that they may not have seen done in Bubble.

2 Likes

That’s super clever.

1 Like

Great idea, Scott! Hope it goes well!
curious to see your updated app

Thanks,
Levon.

Founder at Bubblewits - Bubble Certified Partner

http://bubblestore.io – a place to buy Bubble templates for landing pages, e-commerce, workflows, APIs etc.
http://iambubble.com - one page Bubble demo
http://builtonbubble.com - Collection of apps built on Bubble

Hi guys,

How can I do this if I want my half of my group outside of the screen? Say I have a picture of a head at the bottom of the screen and if I click on it, the image will scroll up and it will show the whole body as well. Is it possible to have half of the group outside the page area? If not, what workaround can I do?

Thanks.

I believe you can move elements to be off the page. Just set the x-value to negative (e.g., -100) to move them off the left side of the page. Or, make the x-value larger than the page width to move them off the page on the right.

1 Like

Thanks. I will try that.

Brilliant. Invisible Slider panels kinda sure you can get real tricky with this technique

This is a really great solution for a defined number of pixels (and a very clever find!), but is there a responsive solution? Like, say I want to move an element by 25% of the page width? Ideally, I’d love for X,Y,W,H all to be powered by dynamic data.

Although I haven’t used it @pflu0008 , I’m pretty sure that this is the use case covered by the MoveIt! plugin by @jarrad

I use moveit! you can also do this in part with the other plugins @jarrad provides

% of page width no problem.

element

1 Like