Transform and Move Elements

✅

Link to the plugin page: https://zeroqode.com/plugin/transform-and-move-elements-plugin-for-bubble-1739742724802x134991830013002640

Demo to preview the plugin:

✅

Live Demo: https://wonderfulplugins.bubbleapps.io/transform-elements

✅

Bubble Editor: https://bubble.io/page?version=live&id=wonderfulplugins&name=transform-elements&tab=Design&type=page

Introduction

This plugin allows you to transform and translate elements in your Bubble application through workflows.

You can apply smooth motion and visual transformations like movement, rotation, scaling, and opacity changes helping you create custom animations and interactive UI experiences without writing code.

This plugin is ideal for dynamic UI interactions, on-scroll or on-click animations, and attention-grabbing effects across your app.

Key Features

Prerequisites

Before using this plugin, make sure the following are in place:

Your element has a unique ID attribute set in Bubble’s property editor (used to target the element for transformation).

You’re familiar with Bubble workflows — since all transformations are triggered through workflow actions.

Avoid using layout-influencing actions (like scale or skew) excessively within responsive pages, as they can affect Bubble’s layout rendering.

To restore an element to its original state (e.g., after rotation or translation), run the reverse action manually — as transformations are relative to the original element’s position and don’t stack automatically.

Title	Description	Type
Element ID	The unique ID of the element whose height you want to change. Make sure this ID matches the element’s ID attribute set in the Bubble editor.	Text
Height	The new height value (in pixels) to apply to the selected element.	Number

Title	Description	Type
Element ID	Enter the unique ID of the element that should be modified.	Text
Width	Specify the new width of the element (in pixels).	Number

Title	Description	Type
Element ID	Enter the unique ID of the element you want to apply the translation to.	Text
Distance	Define how far (in pixels) the element should move horizontally. Positive values move it to the right; negative values move it to the left.	Number

Title	Description	Type
Element ID	Enter the unique ID of the element you want to move vertically.	Text
Distance	Define how far (in pixels) the element should move vertically. Positive values move it downward; negative values move it upward.	Number

Title	Description	Type
Element ID	Enter the unique ID of the element you want to move.	Text
Distance X	Define how far (in pixels) the element should move horizontally. Positive values move it to the right; negative values move it to the left.	Number
Distance Y	Define how far (in pixels) the element should move vertically. Positive values move it downward; negative values move it upward.	Number

Transform and Move Elements

Demo to preview the plugin:

Introduction

Prerequisites

How to setup

Step 1 – Install the Plugin

Step 2 – Example Setup (Translate X)

Plugin Actions

Change height

Change width

Translate X

Translate Y

Translate X/Y

Change Opacity

Rotate

Skew X

Skew Y

Scale

Changelogs

Update 03.10.25 - Version 1.6.0

Update 18.07.25 - Version 1.5.0

Update 31.05.25 - Version 1.4.0

Update 17.02.25 - Version 1.3.0

Update 23.08.24 - Version 1.2.0

Update 23.04.24 - Version 1.1.5

Update 22.04.24 - Version 1.1.4

Update 12.10.23 - Version 1.1.3

Update 02.10.23 - Version 1.1.2

Update 14.09.23 - Version 1.1.1

Update 03.01.23 - Version 1.1.0

Update 27.08.19 - Version 1.0.0