Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


Can I inspect motion transitions in Studio prototypes?

Follow
This feature is in beta and is subject to change. If you have any questions or feedback, let us know.

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 (inspect-mode-icon.png).
  3. In the left-hand layers panel, layers with interactions are denoted with a lightning bolt (motion-transition-lightning-bolt.png). 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.

studio-motion-interactions.gif

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 (motion-transition-lightning-bolt.png) for the chosen interaction. Then click the interaction name.

You can also access the motion player from the Interactions section of the right-hand information panel by clicking the interaction name.
studio-accessing-the-motion-player.gif

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 (inspect-motion-player-back.png) or forward (inspect-motion-player-forward.png) button. To navigate to a specific point in the animation, drag the pink scrubber.

studio-motion-player.gif

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.

inspect-motion-info-panel.gif

In the right-hand information panel, you will notice two tabs: Motion and Code. Click the settings icon (studio-motion-settings-icon.png) 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 (studio-motion-copy-icon.png).

inspect-motion-interaction-motion-tab.gif

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

inspect-motion-code-tab.gif

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 (motion-inspect-back-button.png).


Was this article helpful?

Still have a question?

Contact Us