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: https://bubble.io/page?id=uncode-25838&tab=Design&name=panzoompro

FORUM: https://forum.bubble.io/t/new-plugin-pan-zoom-pro-a-figma-like-canvas-for-your-native-bubble-elements/347226

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