How to animate with Gyroscope?

Yes, this is possible by passing number values into your Rive graphic via inputs: https://rive.app/community/doc/state-machines/docxeznG7iiK

Here's how you can use inputs to control your animations: https://rive.app/community/doc/inputs/docwgNrq7ssz

rive.app

Inputs

rive.app

State Machines

Can you elaborate. How exactly do I need to set up the inputs and state machine?

It really depends on what you're trying to achieve. Can you tell me exactly what you're trying to do?

Sorry for not being clear, we are trying to achieve something very similar to this. https://60fps.design/shots/cred-invite-card-gyroscope

Here's roughly what I would do.

1. Create a timeline for the tilt left and the tilt right positions. Ex: tiltRight might look like this:

   

2. Create a number input called horizontalTilt.

3. Add a layer to your state machine with a blend state between the leftTilt and rightTilt timelines that is controlled by horizontalTilt. If you play your animation, changing the input of horizontalTilt should simulate rotating your phone right and left.

   

4. Repeat these steps for vertical tilt as well. Now playing your animation and updating the horizontalTilt and verticalTilt values should simulate rotating your phone up/down/left/right.

   1. Debugging: Let's say for example that your shadow moves up and down correctly, but doesn't move left/right. That probably means there's something in your up/down timelines that's overriding your left/right animation. Double check that there are only keys for the x position of the shadow in the left/right timelines, not the up/down ones.

5. Inside your code, listen for the devices orientation. Here's a very basic JS example:

function handleOrientation(event) {
  let alpha = event.alpha; // Rotation around Z-axis
  let beta = event.beta;   // Rotation around Y-axis (tilt front-back)
  let gamma = event.gamma; // Rotation around X-axis (tilt left-right)

  // Add logic to convert rotation to input value
  // Ex: https://stackoverflow.com/questions/69216465/the-simplest-way-to-solve-gimbal-lock-when-using-deviceorientation-events-in-jav

  //  Set your horizontalTilt input value based on the phone's orientation
}

window.addEventListener("deviceorientation", handleOrientation, true);