> For the complete documentation index, see [llms.txt](https://bubble.digital-bird.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bubble.digital-bird.com/plugins/move-rotate-and-resize-element.md).

# Move, Rotate & Resize element 🔄

## 🔗 Links

> [Demo](https://digitaleyedemo.bubbleapps.io/version-test) | [Editor](https://bubble.io/page?name=index\&id=digitaleyedemo\&tab=tabs-1)

> [Plugin page](https://bubble.io/plugin/move-rotate--resize-element-1613310378435x672329527629709300)

> [Forum](https://forum.bubble.io/t/new-plugin-move-rotate-resize-bubble-elements/137469)

## ℹ️ Introduction

![](/files/-MXg7QvL_L6prnvwsvl9)

## 🔥 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

{% content-ref url="/pages/-MXfykQSfukoAWO5UBlp" %}
[How to add a custom class or an ID to a Bubble element](/classify.md)
{% endcontent-ref %}

2\. Add any elements on the page. For each element you want to rotate, move etc, define an id:<br>

![](/files/-MXg8-ZNTGTJ8MSDs7CI)

### **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)