Fluid transitions, are they possible on bubble?

lucas.ar · 2020-08-26T10:12:15.834Z

Hi there, i was looking in dribble this GIF and somehow thought that this level of fluidity is not possible on bubble front end.

I’m i wrong ? Is there a live app to prove me wrong ? thnx

tab-bar-twitter800

Dribbble

Twitter's Tab Bar

Twitter's Tab Bar designed by Rafa Sánchez. Connect with them on Dribbble; the global community for designers and creative professionals.

lucas.ar · 2020-09-01T10:53:30.243Z

Maybe you guys can help ? @Malcolm @eve @Jeremy and @carla , cheers !

jdiaz · 2020-11-23T19:29:53.403Z

I built what is shown below using the draggable plugin, just five drag/drop groups and five workflows. To recreate, do the following:

Create the four drag/drop groups and put the icons and text into them. The groups I created had 8px top/bottom padding and 16px right/left padding. Write down the width of each drag/drop group.
Create a fifth drag/drop group that is transparent and create four groups with the color and transparency added to them, then adjust the widths of the groups and add condition statements to show them depending on what button is active.
Add all in a group and figure out the margins for the first and last button before figuring out the spacing for the other two buttons. The first button will never move and its drag/drop group will be what you use to adjust the spacing of the others.
Create workflows for clicking on each of the icons and have actions to move the second, third, and fourth buttons as well as adjust the selector button.
Create a workflow on page load to adjust the spacing of the buttons as the group might be too small to fit everything in the editor. Zero out the speed so it happens immediately.

Take a look at the editor below and let me know if you have any questions. You will need to play with the spacing to get it how you want.

Screen Recording 2020-11-23 at 1.45.35 PM

Editor Link: https://bubble.io/page?type=page&name=fluid_transitions&id=bsi-forum-app&tab=tabs-1

nocodeventure · 2020-11-23T20:28:25.124Z

I understand the setup but can’t really gey my head around how you came up with this. You’re a genius.

Can we pick some more out of your mastermind?

jdiaz · 2020-11-23T22:16:57.617Z

Yeah, when you get past the idea that drag/drop groups are only for reordering lists, you can do some crazy things with them. You can use them for moveable pop ups, drag and drop builders, and even skeleton UI loading screens. All done with Bubble elements.

nocodeventure · 2020-11-23T22:43:14.618Z

How would movable popups work?

Thanks a lot, can’t wait to be using this idea on my next project!

ben4 · 2020-11-24T23:05:43.918Z

Holy cow, This goes way above my head and I have been trying to do it for about an hour now. Uh oh lol. Can I pay you or something to help me understand how it all works. I get the gist, but I dont seem to be able to expand it to make more than 4 options. I am looking to do six in this case, but understanding how it works would let me make as many as I want.

Please lol!

Thank you,
Benjamin

jdiaz · 2020-11-25T13:42:46.570Z

The moveable popup has some limitations. I would place the drag/drop group at the bottom of the page and hide it on page load. Add a workflow to show the group and an action to move the group to a specific point, like the header. The group is above the rest of the page and you can drag it around and move it, but it doesn’t float, so when you scroll up or down the page, the group moves with the page versus staying still. I have tried changing this using css, but Bubble uses absolute positioning and you need to change that property to fix to allow it to float. I couldn’t get the float part to work.

And if you want to do a skeleton ui, take a look at this post. The gif recording shows it as a block, but it looks better on the screen when you build it. I’ll add the workflow and how it’s built to the page of the navbar.

Skeleton UI on Repeating Groups Need help

how can i use a drag and drop group to get the pulsating effect?

Editor for Moveable Popup: Bsi-forum-app | Bubble Editor

jdiaz · 2020-11-25T13:44:18.282Z

Hey Benjamin,

I’d be more than happy to help you out. Let me work on a write up on how I did it step by step and see if you can use that to adjust the nav bar for six instead of four. If that doesn’t solve the problem for you, we can look at jumping on a Zoom and go over it.

Jon

ben4 · 2020-11-25T17:59:46.356Z

Thank you! this is amazing.

boston85719 · 2020-11-25T18:18:01.280Z

This is really cool…one thing that I am looking at is the text messages that seems to come in off the screen.

I checked out the editor you posted, haven’t tried to implement this, but wanted to see how maybe it could be made show the messages text doesn’t come in off the screen.

In the editor you set the custom state of tab to show the group a that contains the text element ‘messages’

It gets triggered just after the movement workflow event.

Screen Shot 2020-11-26 at 1.16.23 AM805×729 39.7 KB

Perhaps, putting a navigation pause of the same duration or a bit less than the 500ms of the move before you set the custom state would allow it not to seem like the text comes in off the screen?

Please give that a shot to see if it does anything…I’m really curious if it will.

Another idea is to use a transition on the text elements color, so that it normally is set to a transparent color, then when the custom state tab is set, the font color is conditionally changed to the black, but put a transition on the font color that is about 300 to 500ms as an ease in ease out.

I wish I could try these out myself.

jdiaz · 2020-11-25T19:15:44.972Z

@boston85719 - I had not played with the formatting too much, but taking what you said, I changed the opacity on the text to 0%, then added a conditional for when the text was visible to change the font color opacity back to 100%. I then added the ease-in-out transition for 1000ms and it seems to have done the job.

nocodeventure · 2020-11-25T20:49:32.611Z

I made a more simplified version.

Bubble

Bubble Editor - Oilpricing

Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

ben4 · 2020-11-25T21:11:20.531Z

Hey, I like that, but would really really love to have the words show when it was clicked… Thank you though.