Can I inspect motion transitions in Studio prototypes?

If you’ve created motion transitions in Studio, you can use Inspect in InVision Cloud to grab the details developers need to help build those animations. If you haven’t created motion transitions yet, check out this article: Managing Advanced Animations

Accessing Inspect Motion

To access Inspect Motion for Studio:

1. Sign in to InVision Cloud and open your Studio prototype.
2. At the bottom of the page, click the Inspect mode icon ().
3. In the left-hand layers panel, layers with interactions are denoted with a lightning bolt (). Click that layer to reveal an Interactions section in the right-hand information panel.

In the Interactions section, you can click the toggle to show hotspots, or you can click the interaction name to open the motion player.

Using the motion player

To preview an interaction, navigate to the left-hand layers list—or the artboard itself for motion interactions—and click the lightning bolt icon () for the chosen interaction. Then click the interaction name.

You can play or loop the motion transition as well as change the playback speed. Note that changing the playback speed in Inspect will not affect the actual speed of the motion transition in your Studio prototype. To jump to the beginning or end of a transition, click the backward () or forward () button. To navigate to a specific point in the animation, drag the pink scrubber.

Inspecting motion transitions

When the motion player is open in the left-hand panel, you can click each group or layer to reveal more information in the right-hand panel.

In the right-hand information panel, you will notice two tabs: Motion and Code. Click the settings icon () to choose the format for Unit, Colors, and Code. 

The Motion tab displays information such as Duration, Delay, Easing, and Start/End points. To copy any of these values, hover over the item and click the copy icon ().

The Code tab displays the code for that particular layer. To copy the code snippet, hover over the code block and click Copy.

When you are finished using the player and inspecting the motion transition, navigate to the top-left corner of the page and click the back arrow ().