Transform and Translate Elements

Demo page

Introduction

This Plugin allows you to transform and translate Elements in your app within a workflow.

Features

This Plugin can be used to create your own animations and make your app more interactive.
The following Actions are included:
  • Translate X
  • Translate Y
  • Translate X/Y
  • Scale
  • Rotate
  • Skew X
  • Skew Y
  • Change Opacity

How to Setup

After installing this Plugin head to Settings->General and Enable the option to add ID attributes to HTML Elements. See a short guide here: https://docs.rapidevelopers.com/how-to-assign-an-id-to-the-element
Choose an element within your editor that should be transformed/translated and give it a unique Element ID within the Element Inspector.
You can now trigger one of the various actions within a workflow. You will have to specify the Element ID of the element that should be targeted as well as some other parameters according to the action that is used (see documentation within Workflow).
⚠️
When you use the action that allows you to change the width/height of the element, be careful on using it in bubble layouts, this may interfere with page design when used in responsive mode, because of influencing the Bubble’s CSS.
☝
Please Note: All Transform/Translate Actions are always relative to the original position/size of the element and are therefore only run once. For Example, a rotation action with an angle of 30 degrees will rotate the original element by 30 degrees clockwise. Running this action will not rotate the element by a further 30 degrees. To get the element to the original rotation angle you would have to run an action with a rotation angle of 360.

Frequently Asked Questions

⁉️
Have a question, or suggestion, or encountered an issue? πŸ€·β€β™‚οΈ Please contact us by sending an email to: support@rapidevelopers.com
☝
Want to report a bug? Please follow this guideline!