[New Plugin] Pan & Zoom Pro - A Figma-like Canvas for Your Native Bubble Elements

Showcase
1

Hey Bubblers, some exciting news:

We’ve just launched our first plugin, :mag_right: Pan & Zoom Pro - an infinite ‘Figma-like’ canvas for your native Bubble elements that works everywhere (PC/Mac/touch devices).

What does ‘Figma-like’ mean?
To us, Figma (the design tool) is the gold standard of how a canvas UI should behave. We’ve used this experience as our benchmark to deliver your Bubble app the following:

  • Performant and lightweight pan/zoom across all platforms
  • Intuitive control schemes across all platforms
  • A robust coordinate system with exposed states
  • Streamlined element position detection with Positioner
  • Actions for manipulating pan/zoom/positioner via workflows

What can I put on the canvas? :art:
Pretty much anything. Really, we’ve tested this plugin with every native Bubble element in the editor and they pan and zoom correctly and performantly. We’ve even put other plugins inside the Element folder and it simply works (although we can’t guarantee this). This high level of compatibility is inherited from the core library used for this plugin (Panzoom.js) and the fact that we’ve been careful to preserve this as we’ve built out the features of the plugin on top of it.

Can I put clickable/tappable elements on the canvas? :computer_mouse:
We’ve worked to ensure full compatibility for all workflow-enabled elements that reside within the canvas across all platforms. Rest assured that whether your users are on PC (with a mouse), Mac (via trackpad or mouse) or any touch-enabled device, they will be able to interact with your canvas the way you intend them to.

What is Positioner? :dart:
Positioner is a powerful utility bundled in with this version of Pan & Zoom Pro that uses the internal coordinate system to detect the location of any element on the canvas using its ID. For example, you could use positioner to detect a Repeating Group’s cell on your canvas from a sidebar menu item, then feed the XY coordinates to Pan & Zoom Pro’s in-built ‘Pan & Zoom to XY’ to pan directly that element, centering it on the page. You can see this in action in our demo.

We really believe that this plugin makes a whole new category of apps possible on Bubble that were previously in the ‘too-hard’ bucket. We’re excited to see what app ideas this unlocks for the clever people in this community!

DEMO: https://uncode-25838.bubbleapps.io/version-test/panzoompro

EDITOR: uncode | Bubble Editor

PLUGIN: Pan & Zoom Pro Plugin | Bubble

Please reach out if you have any questions or issues, we’re more than happy to help you.

Best,
Tom & Rick

4 Likes
2

@tmxl This functionality is amazing!

If I understand correctly, I could build OpenTable seating-arrangements-type apps where the elements can be clicked? … Including rows of RGs?

1 Like
3

Thanks @cmarchan !

Yes you most definitely can - follow the setup instruction and place an RG (and another nested if needed) inside your element folder. Each cell (or table in this example) can be clickable/selectable using a custom state, and maybe you could show a default table selection on load using positioner. Your users will be able to pan around the canvas and select an alternative table to their liking.

1 Like
4

Terrific!

WIll you plan to make it compatible with the upcoming mobile editor?

5

As the Bubble mobile editor is based on React Native, I see no reason Pan & Zoom Pro would have any compatibility or performance issues.

We’ll be sure to test it thoroughly once we have access and I’ll reply to this comment with confirmation. :slightly_smiling_face:

1 Like
6

:hammer_and_wrench: Demo Update + Bug Fixes :hammer_and_wrench:

Screenshot 2024-11-07 155145
Screenshot 2024-11-07 1551451648×1126 144 KB

Demo:

  1. Examples of all primary exposed states:
  • pan_center_coordinate_x (live) :triangular_flag_on_post:
  • pan_center_coordinate_y (live) :triangular_flag_on_post:
  • pan_center_coordinate_x_end (only updated on mouse out) :triangular_flag_on_post:
  • pan_center_coordinate_y_end (only updated on mouse out) :triangular_flag_on_post:
  • current_zoom_level (live) :mag_right:
    You can find the coordinate values in the nav.

  1. Pan left/right/down/up buttons wired to their corresponding actions

  2. Zoom in/out buttons in the top right of the canvas wired to their corresponding actions

  3. Control schemes and shortcuts for PC/Mac/touch devices in the nav

Fixes:

  • Resolved a conflict with external element scrolling. :white_check_mark:

Happy Bubbling.

3 Likes
7

Hey legends!

Just a note that we’ve updated our pricing for this plugin. Thanks to those who reached out—we understand a subscription-only model doesn’t work for everyone, so you can now own Pan & Zoom Pro outright for $89 per app.

We’ve also halved the monthly subscription fee to $8/month.

We have an exciting roadmap ahead (multiplayer cursors anyone?) for this plugin and this new structure should let us hit those development goals while also being more accessible to those who want to build around it right away.

All the best