DigitalEye Plugins
  • Home
  • How to add a custom class or an ID to a Bubble element
  • LINKS
    • Contributor page
    • Contact us
  • PLUGINS
    • Advanced Dynamic Tables 🚀
    • Advanced Editable Tables ✏️
    • Export Page to PDF 🔥
    • Advanced Algolia Search 🕵️
    • Rich Text Editor like Medium 📝
    • Scrollspy 👁
    • Move, Rotate & Resize element 🔄
    • Inverted RepeatingGroup (for Chat app)
    • Live Chats (LiveChat.com, Intercom ...) 💬
    • Advanced Screenshot Element 🖼
    • Screenshot Element 🖼
    • Cookies 🍪
    • Device by Screen Size 📱 🖥 📺
    • Browser Language and Locale 📍
    • Advanced <iframe> element 🖥
    • Conditional Redirect 🔀
    • Users Online 🙋‍♂️
    • Page Close Event 🚪
  • TEMPLATES
    • Eatics: Food Delivery Platform like Uber Eats 🍔
    • Coursus: Advanced Online Courses (Udemy-like) 🎓
    • Sline: Premium Admin & Dashboard 📈
    • BubbleBook: a GitBook clone
    • BubbleBook Landing
Powered by GitBook
On this page
  • 🔗 Links
  • ℹ️ Introduction
  • 🔥 Features
  • 📚 Documentation
  • Element Move (Action)
  • Element Offset (Action)
  • Element Reset (Action)
  • Element Rotate (Action)
  • Element Spin (Action)
  • Element Stop Spin (Action)
  • Element Resize (Action)
  • Resize Element (Element)

Was this helpful?

  1. PLUGINS

Move, Rotate & Resize element 🔄

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

PreviousScrollspy 👁NextInverted RepeatingGroup (for Chat app)

Last updated 4 years ago

Was this helpful?

🔗 Links

|

ℹ️ 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

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)

How to add a custom class or an ID to a Bubble element
Demo
Editor
Plugin page
Forum