A rotate-around-object interaction turns an element to face the cursor — useful for needles, eyes, arrows, and playful hovers.
Where: Right sidebar → Interact → Interactions → “+” → Pointer — Add a rotate-around-object interaction
Key ideas
- Direction & axis: rotateDirection and axis set how the element orients toward the pointer.
- Scope & smooth: scope chooses the reference area; smooth damps the rotation.
Steps
- Select the element.
- Add a rotate-around-object interaction.
- Set the direction/axis and a little smoothing.
Choose the rotation reference
- The interaction exposes rotation direction, axis, scope, and smoothing.
- Scope determines whether the pointer reference is the element or the window; choose it based on whether the movement should be local to the component.
- Smoothing dampens the response. Start gently and increase only when the pointer-following motion feels too abrupt.
Target and preview
- Select the element that should rotate, add Rotate around object from the Pointer interaction category, and verify the intended axis/direction.
- If the interaction should respond to a different hit area, configure the trigger/target relationship separately from the rotation settings.
- Preview with the pointer near the corners and center so the element does not spin unexpectedly at extreme angles.
Tips
- Use restrained rotation for small details such as eyes, needles, or arrows; large rotations can reduce readability.
Limitations and important notes
- The effect is pointer-driven and should not be the only way a user can understand or operate an essential control.