Move, Rotate & Resize element 🔄

Move, offset, rotate, spin and resize Bubble elements by its id in a very simple way
Demo | Editor
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. 1.
    Install and configure Classify plugin
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)