×

Prototyping with 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.

Note: 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.

Motion UI

studio-ui-motion-settings.png
Adjust duration and delay for the entire transition with Motion.

Element Purpose
Transition: Preset
Use the Studio Preset radio button for preset transitions.
Use one of Studio’s pre-defined transitions: Instant, Fade in, Slide left, Slide right, Slide up, Slide down, Push left, Push right, Push up, Push down
Transition: Motion
Use the Studio Motion radio button to adjust global settings for transitions.
Create an animated transition between two artboards.
Duration
Use the Duration scrubber to adjust animation duration in Studio.
Use the text field and scrubber to adjust duration.
Delay
Use the Delay scrubber to adjust animation delay in Studio.
Use the text field and scrubber to adjust delay.
Edit Timeline
Click the Edit Timeline button to access Timeline settings in Studio.
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:

  1. In the layers panel, select any layer with the interaction icon (lightning bolt) next to the name.
  2. In the Interactions section of the inspector panel, click the Motion radio button.
  3. 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

studio-timeline-ui.png
Take complete control of every animation property with Timeline.

Element Purpose
Duration
studio-ui-timeline-duration-labels.png
Use as guide when dragging scrubber.
Scrubber
studio-ui-timeline-scrubber.png
Drag the scrubber to preview animated transition as slowly or quickly as you want, pausing at any point.
Range
studio-ui-timeline-range-bar.png
Drag the range bar to adjust.
Bézier curve editor
studio-ui-timeline-bezier-curve-editor-icon.png
Hover over layers with animations to open the Bézier curve editor and change transition type and/or adjust the default curve.
Repeat
studio-ui-timeline-preview-repeat-icon.png
Set animation to play on loop when previewing in Studio. This does not affect published projects when viewed on InVision.
Start State
studio-ui-timeline-preview-start-state-icon.png
Return to the animation start state (without restarting the animation).
Play
studio-ui-timeline-preview-play-icon.png
Play the animation from start to finish.
End State
studio-ui-timeline-preview-end-state-icon.png
Skip to the animation end state.
Speed
studio-ui-timeline-preview-playback-speed-dropdown.png

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

Layout options
studio-timeline-layer-panel-switcher-icons.png

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.

Adjust numerous precise settings for your animated transitions and for Timeline itself:

  • Layer linking: Button control to auto link or unlink shared layers
    Note: Remember that shared layers must have the same name on both the starting artboard and ending artboard of your transition.
  • Preview speed: Drop-down list of speeds for preview
  • Layers panel layout: Button control to switch between left-aligned layers and bottom-aligned layers
  • Global artboard settings: Duration, delay, and timing curve controls—applied to all layers on the artboard that have no overrides set
  • Inspector properties: Modify layer properties in the inspector
    Note: Toggle inspector via the View menu or use the keyboard shortcut: Command+Option+2
  • Individual layer settings: Duration, delay, and timing curve controls—applied to layers or groups, overriding any previously defined global artboard settings

EDITING ANIMATIONS WITH TIMELINE

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

  1. In the layers panel, select any layer with the interaction icon (lightning bolt) next to the name.
  2. In the Interactions section of the inspector panel, click the Edit Timeline button.
  3. 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.

studio-timeline-viewport.gif
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.

Important: 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.

Note: 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).

There are also numerous ways to animate linked layer fills—including image fills—in Studio.

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.

Note: 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

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.

Note: If Inspector is open when you exit Timeline, it will remain open the next time you use Timeline. Likewise, if 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 

studio-timeline-animated-curve-dropdown.png
Select the animated transition type.

Fine-tune animated transitions in Studio with the Bézier curve editor.
Adjust the animation timing curve.

FINE-TUNING ANIMATIONS WITH THE BÉZIER CURVE EDITOR

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

  1. With Timeline open, hover your mouse over any layer with animation properties to reveal and click the curve editor icon.
    Note: The appearance of the curve editor icon changes slightly, depending on curve setting for the individual layer.
  2. In the curve editor modal, click and drag the Bézier endpoints as wanted.
    Note: 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.
  3. Click outside the modal to return to the main Timeline editor.
 

Getting Started: Studio (
)

Prototyping with Advanced Animations

Prev