So I’m loving the new responsiveness engine, but I’m trying to figure out how to accomplish a left-hand expand/collapse navigation pane that slides in/out smoothly. Anyone comfortable enough with the new engine and figure it out?
I’ve configured simple toggling, but I can’t figure out animation. I thought I could just use the Animate action in a workflow, but no joy.
1 Like
Whipped this up for you real quick… it does use a bit of code to make the transition smooth and there are a few ways to achieve this, but I tried to create a solution that did not require editing things in 2 different places etc… Take a look and let me know. I also gave a quick breakdown below of what I did.
Layout:
Page is set to Row - Full Width
2 Child Containers (Sidebar / Main) both set to Row 100% height
Button that serves as the sidebar toggle
Plugins:
Toolbox (Used to run JavaScript from action)
Enable the “Expose the option to add ID” in Settings - General tab and give your sidebar an ID of “sidebar”
Code: (This is added to the Buttons Clicked Workflow in a run JavaScript action (Becomes available once Free “Toolbox” plugin is installed)
$(“#sidebar”).css({
‘flex’ : 0 + ’ 1 0%',
WebkitTransition : ‘flex 1s linear’,
MozTransition : ‘flex 1s linear’,
MsTransition : ‘flex 1s linear’,
OTransition : ‘flex 1s linear’,
transition : ‘flex 1s linear’
});
Hope this helps or atleast gives you some ideas.
4 Likes
@shotymac, is it possible to create the same effect as Mixpanel have on their dashboard (gif below)?
I’d like on hover to show each section’s description of my sidebar, but as the user get their mouse out to show only the sidebar icons.
1 Like
@carlos.onbarbosa Yes, at a quick first glance this should be possible. Would definitely require some custom code as I am sure you are aware of and possibly creating a few “states” but should be definitely doable. I will work on this and post back with a solution.
3 Likes
No smooth animation, but pure Bubble…
2 Likes
@carlos.onbarbosa here you go… this should be pretty similar to your example.
Editor to see the workflow
1 Like
Thanks a lot @shotymac and @sudsy! I’ve tried both ways and they’ve worked amazingly well!
Since I’ll be using my sidebar across multiple pages, I’ve converted it into a reusable element. The outcome wasn’t the same as using the floating group techniques you sent.
Any ideas on how to get rid of this blank space that keep increasing with the page content?
@carlos.onbarbosa glad it worked out for you. In regard to the blank space, I am a bit unclear from the pic as to which blank space you are referring to. Can you maybe mark up the pic so I know what exactly you are referring to? Or maybe provide a link to the page for me to view? Once I am clear on the issue I can be of better help.
Of course, with the recently added transitions, this is now smooth as butter with pure Bubble.
1 Like
How would you use Buildshare in your bubble app ??
Stay tuned. Exciting updates on the horizon…
I made this
Looks like I deleted that app when clearing things out.
I’ve made another one.