Learn how to prototype web and mobile apps

How to rotate elements in your interactive wireframes

Rotate elements in your interactive wireframes in order to add more engaging interactions. In this tutorial, you will learn how to do so.

With release 6.8, ‘Rotate’ became a default action in Justinmind’s events.

With the ‘Rotate’ action available in the Events dialog, you can rotate images, texts, shapes widgets, as well as Dynamic panels and groups of elements, which will rotate at the trigger of your choice. You can apply easing effects and animations, and set rotation values as a fixed number, an offset value, or an expression.

You can download the example below here.

Rotate elements in your interactive wireframes

You can rotate any image, text or shape widget simply by using the handle that appears on a rotatable component (i.e. Text, Image, Paragraph, Rectangle, Ellipse, Triangle, Lines, Button, Hotspot, Summary and Index). You can also change the angle of the widget from the properties panel.

If you want to rotate Dynamic panels or groups of elements, or if you want to apply any effect or calculated rotation values to any of the widgets, you can use the “Rotate” action.

In the events dialog, you will be able to: select the event trigger; add a condition; select the angle value, which can be fixed, calculated, or an offset; and apply an easing effect.

Now let’s dig deeper and learn how to reproduce the Rotate action that we can see in the example above, i.e. an “On page load” rotate (Automatic) and an “On click” rotate.

The first image starts automatically when the page loads, and completes a full spin many times in a row before slowly stopping. To include it in your wireframe, and select the right options to reproduce the effects we can see in the exemplary image, follow the steps below.

1) Create a new web prototype

2) Drag two Image widgets to the canvas and upload two images of your choice.

3) Select the first image and click “Add event” in the Events tab.

4) In the event dialog, select “On page load” + “Rotate”. Click on the first image so that the event will be applied to it.

5) Change the Angle to “Offset” and insert 3600º, so that the image will complete a full 360º spin ten times in a row.

6) Change the Easing effect to ‘easeOutQuad’ and set the Duration to ‘10000’. An easing function describes an animation’s execution through time. The ‘easeOutQuad’ starts out fast and then decelerates to its ending value, just like the effect we want to reproduce.

Rotate elements on page load in your interactive wireframe

The second image starts rotating when we click on it, and it only completes a full spin before stopping at a slower pace. Here’s how to add this action to the image in your wireframe, and what options you need to select to apply the effects we can see in the image in the example.

1) Select the second image and click “Add event” in the Events tab.

2) In the events dialog, select “On Click” + “Rotate”. Click on the second image so that the event will be applied to it.

3) Change the Angle to “Offset” and insert 360º. In this case, the image will complete only a full 360º spin.

4) Change the Easing effect to ‘easeOutQuad’ and set the Duration to ‘1000’.

Rotate elements on click in your interactive wireframes

Now you can click on ‘Simulate’ and enjoy!

Next tutorial > Simulate Drag and Drop in your interactive wireframes