Gyro effects

Add movement to your watch face to help your design stand out. Gyro effects change the appearance of the watch face as the watch is tilted.

Gyro effects let you adjust the dimensions, inner pivot positions, rotation, and opacity of objects in your watch face.

In the Gyro section of the Properties tab, adjust the X and Y rotation dimensions of independent objects to create 3D effects for your watch face. You can define how the object responds to watch rotation along the X and Y axes.

Figure 1. Applying gyro effects

Rotation axes

Gyro effects apply as the watch moves within the -90º to 90º range along the X and Y axes. The watch is considered level when it is at 0º.

You can also design watch faces that change appearance when the watch moves clockwise or counter-clockwise.

Figure 2. Gyro axes

When wearing your watch on your left wrist, if your watch rotates 90º upwards (counter-clockwise) along the X axis, this displays as -90º. When the watch rotates 90º downwards (clockwise) along the X axis, this displays as 90º.

Figure 3. Rotation around X axis

When wearing your watch on your left wrist, if your watch rotates 90º to the left along the Y axis, this displays as -90º. When the watch rotates 90º to the right along the Y axis, this displays as 90º.

Figure 4. Rotation around Y axis

Range

Range values are used to calculate how much the elements rotate. For example, if you enter values of -90 and +90, to create a pivot range of -90º to 90º, then inner_pivot_x is 80 pixels to the right of the base value when the watch rotates 80º.

Figure 5. Defining range values

Note:Gyro effects only work when the two endpoints of the range have the same absolute value. For example, inner_pivot_x cannot have reference points of -90 and 45, but can have reference points of -45 and 45.

The following figure illustrates how an element rotates depending on the X and Y range values.

Figure 6. Range value examples

You can also configure the following additional properties for gyro mode:

Scale enlarges and shrinks an object in relation to a point at its center. The point remains in the same position while the object gets bigger or smaller.
Displacement changes the position of an object using a point at its center. The “Position” value is based on the center of the object.
Rotate rotates an object based on a point at its center. Rotations do not change the position of the object.

Figure 7. Additional gyro properties: Scale, displacement, and rotate

Note:When you enter an exact value in the gyro input field, it is important to consider how the object’s position and dimension changes. Visualize how the object looks when located at -90 or +90, then use this to input a value so that your object reaches the desired end position.