Recording Page
The recording page is where you can see the interaction recording–the recorded scenario and all interaction specs needed for implementation.
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/cb51c23ac9c1915d96e2626dc15a14e0dbc88bee-2175x1200.png/Interaction-recording-page.png)
Timeline
You can play the recorded scenario of an interaction recording by clicking on the Play button at different speeds. If you want more precise control, drag the timeline scrubber to shuttle forward or backward to any point in time.
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/aec98303d6e669a8df46613a3fb5d013fee05c1b-2175x1200.png/Timeline.png)
Interaction Specs
If you select any trigger or response on the timeline, you get to see the corresponding interaction specs and layer properties in the property panel on the right side.
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/31173ca3d910795d72d06e0a4da7f5eeb79abdd9-2175x1200.png/Interaction-recording-specs.png)
Layer Panel
The layer panel on the left side shows the layer structure of your prototype. Select a specific layer in the layer panel and it would be highlighted in the preview.
Distance Between Objects
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/b8b63b26dc777ce92f2f4ff03e149daaa89ee67e-2175x1200.png/Interaction-recording-objects.png)
You can see the horizontal and vertical distance between objects in the preview by hovering your mouse.
Shortcuts
Use these shortcuts to control the timeline more efficiently.
Feature | macOS & Windows |
---|---|
Play or Pause | Spacebar |
Timeline Zoom In | + |
Timeline Zoom Out | - |
Timeline Panning | Spacebar + Drag |