Forum Academy Marketplace Showcase Pricing Features

[NEW PLUGIN]: Move, Rotate & Resize Bubble elements

Showcase
#1

For my own project, I was needed to dynamically move a Bubble element (a shape) on the screen.
I’ve easily found and purchased a Bubble plugin to resolve the problem but unfortunately it didn’t work at all (later I found that some other developers mentioned the same issue in plugin reviews).
So I finally I ended up creating my own Bubble plugin!

Plugin allows to move, offset, rotate, spin, and resize Bubble elements by its id in a very simple way.

Features:

  • Move an element
  • Offset an element: add horizontal and vertical offset to initial coordinates
  • Rotate an element
  • Spin an element (constant rotation)
  • Resize an element (width, height)
  • Reset an element to initial state

Check the demo to see the plugin in action: DEMO | EDITOR

Full Description, Documentation & Screenshots

I hope that this will be helpful for the Bubble community!

Plugin Page:

6 Likes
Add "rotation angle" to icon AND icon designed by user(s)
A button that centers an image element?
#2

Any idea of resizing a repeating group can be done eventually ? great job btw.

1 Like
#3

Hi @JohnMark ,
Thank you for your interest!
For RG it can work for some simple cases, here is an example:

1 Like
#4

Hi, I love the plugin, but noticed that when you use the Offset element, action, you need to subtract 4 px from the Actual X coordinates if you are moving an element away and back e.g using a slider. This is consistently the case. Once you take X - 4px, then it repositions perfectly. On the Y axis, you need to add 10 px to the original Y coordinates.

Not sure why, but this workaround fixes it for me. If the Y coordinate is 0, then no correction is required.

Also if for example Y is 50 and the slider allows forces the offset to move by -100, then the whole thing will remain off by 50 until the page is reset. (Slider moving element up and down)

#6

Hi,plugins nice. Is it possible to change the elements positon from another page and would it save the live element? Thanks!

#7

Hi @marsj3716
Thank you for your question! Unfortunately it is not technically possible to change the element position from another page… You should put the plugin element on the page where you want to move one or multiple elements

1 Like
How do I get a thing's x and y position to save? Am I wasting time on something impossible?
#8

Hi @BubbleSam I was wondering if the plugin has the option to convert the alignment offset from px to %? For example my image size is dynamic as user uploads, so to center their dynamic image relative to the group % offset would work wonders.

Many thanks

#9

Hi @phetxdphet ,
Thank you for your question and interest in our plugins!

Unfortunately, it is not currently possible to set an element offset in % relative to its parent or another element

#10

Hi @BubbleSam

I subscribed to your plugin, and am trying to use it to adjust the height of a map element to fill up the mobile screen upon page load. I use CSS tools plugin to obtain the user’s viewport height. I created a workflow which, upon page load, resizes the map element to the vertical height of the user’s viewport.

The problem is, after the page has finished loading, the element has not been resized. Not until I change the viewport (by either rotating my phone, or resizing my desktop window) does the element dimension resize like it should.

Do you know what I’m doing wrong? It seems like there needs to be a “refresh” or “redraw” action

Thanks for any help

#11

Hi @greg18 ,
Sorry for the late reply (I’m so sick these days).

Could you please create a demo page to understand better what you are trying to achieve?

BTW in your case probably you can simply add custom CSS to your map?

.map {    
    width: 100%;
    height: 100%;
}
#12

Thanks @BubbleSam – pardon my ignorance but how do you recommend adding CSS? Should I use the Classify plugin, or something else?

#13

You can add an HTML component and insert your custom styles between <style> tags:

<style>
.map {    
    width: 100%;
    height: 100%;
}
</style>

Using the Classify plugin is a good idea to add custom classes to your elements (for example, map in the above example). Here we have detailed instructions on how to use it:
https://bubble.digital-bird.com/classify

Hope it helps! :slight_smile:

2 Likes