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 when building the real deal. If you haven’t created motion transitions yet, you can learn more here: Prototyping with Advanced Animations

Accessing Inspect Motion

To access Inspect Motion for Studio:

1. Sign in to InVision Cloud and open the desired Studio prototype.
2. At the bottom of the page, click the Inspect mode icon ().

In the left-hand layers panel, layers with motion transitions are denoted with a lightning bolt (). Clicking such layers will display an Interaction section in the right-hand information panel. In the Interactions section, you can reveal hotspots by clicking the toggle on.

Using the motion player

To preview a motion transition and inspect individual layer information, select the layer, navigate to the right-hand information panel, and click the desired interaction. The left-hand panel will then display the motion player.

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, you can click each group or layer to reveal the Motion area in the right-hand information panel.

As you expand layers in the motion player and click the various properties, the right-hand information panel will display the Bezier curve, Start Value, End Value, and CSS info. Click any of the values to copy them to your clipboard.

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 ().