Move, Rotate & Resize element 🔄

Move, offset, rotate, spin and resize Bubble elements by its id in a very simple way

🔗 Links
​Demo | Editor​
​Plugin page​
​Forum​
ℹ️ Introduction
🔥 Features
Move an element
Offset an element: add horizontal and vertical offset to initial coordinates
Reset an element to initial state
Rotate an element by a specific angle
Spin an element (constant rotation)
Resize an element (width, height)
📚 Documentation
Plugin contains 7 actions which can be used from the Bubble Workflow and 1 element.
Pre-requirements:
1.Install and configure Classify plugin
How to add a custom class or an ID to a Bubble element
2. Add any elements on the page. For each element you want to rotate, move etc, define an id:

Element Move (Action)
Input parameters:
ID: Element ID to move
Offset X (px): Offset by X coordinate (positive, zero, or negative value)
Offset Y (px): Offset by Y coordinate (positive, zero, or negative value)
Time to move (ms): Time to animate the movement in milliseconds
Element Offset (Action)
Input parameters:
ID: Element ID to offset
Coordinate X: Offset by X coordinate (positive, zero, or negative value)
Coordinate Y: Offset by Y coordinate (positive, zero, or negative value)
Time to move (ms): Time to move the element in milliseconds
Element Reset (Action)
Input parameters:
ID: Element ID to reset
Element Rotate (Action)
Input parameters:
ID: Element ID to rotate
Angle: Rotation angle (positive or negative value)
Element Spin (Action)
Input parameters:
ID: Element ID to spin
Angle Step: Defines the rotation smoothness
Update frequency: Time in milliseconds between two frames (defines the rotation speed)
Element Stop Spin (Action)
Input parameters:
ID: Element ID to stop spinning
Element Resize (Action)
Input parameters:
ID: Element ID to resize
Width (px): New width (px). Leave it empty to keep the original width
Height (px): New height (px). Leave it empty to keep the original height
Animation time (width): Time in milliseconds to animate the width resize. Leave it empty or 0 to change the size instantly
Animation time (height): Time in milliseconds to animate the height resize. Leave it empty or 0 to change the size instantly
Resize Element (Element)
Works in the same way as the "Element resize" action but exposes Width and Height states with the current element's size.
Actions:
Resize Element
Exposed State:
Width: Current element's width (updated after the resize action)
Height: Current element's height (updated after the resize action)

PLUGINS - Previous

Scrollspy 👁

Next - PLUGINS

Inverted RepeatingGroup (for Chat app)

Last modified 2yr ago