Important links

Related articles

Managing Advanced Animations

Take your simple interactions and animations to the next level with advanced motion that lets you modify the global duration and delay, or edit in Timeline.

Because the Interactions area of the inspector is identical to the interactions modal that appears in the canvas when creating a new interaction, this guide applies to both the inspector and the modal.

Motion

A simpler, quick-adjust animation editor for Studio, Motion lets you control each transition animation as a whole.

Access additional animation settings for precise control over each property of the animation.

Motion settings

Studio Motion lets you adjust these two global settings for animated transitions:

Duration: Total time of the animation, from start to finish

Delay: Time between when a user triggers the animation and when the animation begins

Editing animations with Motion

To edit the global animation timing on previously created interactions, use Motion:

In the layers panel, select any layer with the interaction icon (lightning bolt) next to the name.

In the Interactions section of the inspector panel, click the Motion radio button.

Click the Duration or Delay text field to enter the time manually, or use the scrubbers to adjust the time by clicking and dragging.

Timeline

The comprehensive animation editor for Studio, Timeline gives you complete control over every aspect of your prototyping interactions. Timeline presents a compact visual overview of your animation timing and layer hierarchy, allowing precise control over each animated property. Timeline makes it easier to manage complex transitions and fine-tune the delay, timing, easing adjustments, and speed of animated layers and properties. Use Timeline to edit all your animated interactions—adjusting each interaction layer by layer or as a whole.

Timeline UI

Take complete control of every animation property with Timeline.

Element

Purpose

Duration

Use as guide when dragging scrubber.

Scrubber

Drag the scrubber to preview animated transition as slowly or quickly as you want, pausing at any point.

Range

Drag the range bar to adjust.

Bézier curve editor

Hover over layers with animations to open the Bézier curve editor and change transition type and/or adjust the default curve.

Repeat

Set animation to play on loop when previewing in Studio. This does not affect published projects when viewed on InVision.

Start State

Return to the animation start state (without restarting the animation).

Play

Play the animation from start to finish.

End State

Skip to the animation end state.

Speed

Use this drop down menu to set playback speed: 0.1x, 0.2x, 0.5x, or 1x

Layout options

Use the left-align button to display the layers panel to the left of the artboard. Use the bottom-align button to display the layers panel beneath the artboard.

Timeline settings

Before you get started with Studio Timeline, let’s address a few key points about the interface. Timeline presents the starting artboard and ending artboard of an animated transition in a single, merged layers list. Layers and groups in the Timeline layers panel function much like in the main Studio layers panel; however, rather than displaying two instances of shared layers (i.e., layers that share the same name and exist on both artboards of the transition), Timeline displays one row for each shared layer.

Editing animations with Timeline

To precisely adjust the animation details—either globally or on a per-layer basis—on previously created interactions, use Timeline:

In the layers panel, select any layer with the interaction icon (lightning bolt) next to the name.

In the Interactions section of the inspector panel, click the Edit Timeline button.

In the Timeline modal, adjust animation settings as wanted or hover over layers to reveal the Bézier curve editor.

Adjusting the Timeline viewport

To adjust the Timeline viewport, click and drag the label row directly above the artboard names. Dragging the slider right will “zoom in” on the timeline. Dragging the slider left will “zoom out.” Note that adjusting the duration of the Timeline does not change the duration of any animations.

Drag the label row to adjust the Timeline viewport.

Using range sliders

Each layer row contains a range slider, giving you control over every layer in the transition. Layers from either the starting or ending artboard that do not exist on the other artboard are not editible—indicated by the gradient in the range slider. These layers (un-shared layers) transition in sync with the transition in its entirety and use the default animation curve.

To change the delay or duration of a specific layer or group in the Timeline, click the range slider beside it:

Delay: The left end of the range slider controls the animation delay—dragging toward the center will increase the delay and vice versa.

Duration: The right end of the slider controls the animation duration—dragging toward the center will decrease the duration and vice versa.

If you have set a specific duration for a child layer or layer group, that layer or group will not change if you adjust the range bar of any parent layer, parent group, or the artboard itself.

Linking layers

When first creating an interaction between two artboards, all shared layer rows are automatically linked and animated, unless you set manual overrides.* To manually unlink shared layers, select a shared layer and then, in the upper-right corner of the Timeline canvas, click the Unlink Layers button. After unlinking the layers, the button text will change to Auto Link Layers, which you can click to link shared layers that you previously unlinked.

*If a shared object or layer is added to both artboards after you have already created an interaction, these items will not be automatically linked. If you want the new shared layer to be linked, you will need to do so manually.

It is only possible to auto link shared layers (i.e., layers that share the same name and exist on both artboards of the transition).

Changing preview playback speed

With four options for the playback speed when previewing animated transitions in Timeline, you can watch your animations as slowly or quickly as you want. To change playback speed, click the the drop-down list on the right side of the preview controls and click 0.1x, 0.2x, 0.5x, or 1x. You can also use the repeat button on the left side of the preview controls to play your animation on a loop.

The repeat/loop button only affects the preview in Studio, so the animation will not loop when viewing your published project on InVision.

Changing global artboard settings

You can define global settings for your connected artboards, and the settings will apply to all layers and groups unless specifically overridden on a specific layer. Use the artboard settings to control the duration, delay, and Bézier timing curve for the animated transition.

Scrubbing through animated transitions

The scrubber feature in Studio lets you scrub through animation alongside a real-time preview, giving you precision control while you work. Slow playback to a crawl to see that pesky split-second detail you’re tinkering with, or breeze through the animation as fast as you want—or at least as fast as your hand can drag the scrubber. Simply select one or more layers, groups, or the entire artboard, and then click and drag the top of the pink scrubber.

Changing Inspector properties

The inspector is hidden in Timeline by default, but you can open (and toggle) inspector via the View menu or by using the keyboard shortcut (Command+Option+2). Use the inspector to adjust the start state and end state of animated transitions as well as to edit properties for a specific layer.

If the inspector is open when you exit Timeline, it will remain open the next time you use Timeline. Likewise, if the inspector is closed when you exit Timeline, it will remain closed the next time you use Timeline.

Adjusting layer settings

Studio gives you the power to override the global artboard settings for one or more specific layers or groups in animated transitions. That lets you adjust the duration, delay, and Bézier timing curve as needed for a given layer or group without affecting the global settings for the rest of layers in the connected artboards. You can also select multiple layers or groups for simultaneous editing.

Bézier curve settings

Using the Bézier curve editor, you can customize the preset timing curve of an individual animation property or the entire transition:

Ease in: Property transitions toward the center of the screen

Ease out: Property transitions toward the edges of the screen

Ease both: Property transitions both toward the center and edges of the screen

Pop: Property transitions by getting larger and then shrinking to the defined end-point size

Bounce: Property transitions by bouncing into place

Elastic: Property transitions beyond the edge of the screen before springing into place

Linear: Property transitions uniformly over time

Select the animated transition type.

Adjust the animation timing curve.

Fine-tuning animations with the Bézier curve editor

To adjust animation easing, open the Bézier curve editor:

With Timeline open, hover your mouse over any layer with animation properties to reveal and click the curve editor icon.

The appearance of the curve editor icon changes slightly, depending on curve setting for the individual layer.

In the curve editor modal, click and drag the Bézier endpoints as wanted.

In the upper-left corner of the modal, you will notice the animated transition type you had set changes to Custom after adjusting the animation easing.