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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bubble.digital-bird.com/plugins/move-rotate-and-resize-element.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
