The Spin component (Image rotation)

The Spin component allows the user to freely spin any image like a wheel of fortune. It is particularly useful to show the notion of randomness in the games and to present different versions of the same product in product presentations.

You can set limits and make the image spin to a smooth stop, all with a single line of code!

⚡️USE THIS TEMPLATE: Spin The Wheel
Add this template to your account in just a few clicks. Edit and customize it freely.

Spin an image

Click on Components and insert the Spin.

In the properties, select the image you want to rotate. Double click on the component to view the image.

You can set the physical behavior of your rotation. Here are the properties:

Physics: automatically apply natural, momentum-based movement after the mouse/touch is released, causing the image to glide gracefully to a stop.
Resistance: control the amount of resistance.
Limit rotation: lock the rotation at a minimum and maximum angle.
Rotation snap (None / Degree / Marker): you can choose to end the rotation on certain values (degrees or markers).
Default marker: when loading the screen, display your image at a predefined rotation angle by a marker.

Trigger an action based on a rotation angle

Create markers at the rotation angle and associate actions.

Place your image at the desired angle and click + to add a marker.

You can manually edit its angle, choose if it is an Absolute and/or Final angle:

Absolute: this rotation angle will be counted whether the image is rotated once or several times.
Final: this marker will be triggered if it corresponds to the final angle of the image

Associez une action à chaque marqueur.