Animation

Animation in Protowire is about transitioning between different states. Currently Protowire supports 2 states. To animate a layer, create a layer or hotspot link that triggers the animation and set the target to Animation in the top bar. In the popover you specify whether the layer you want to animate is currently in it's start state or end state.

You will then enter the animation editor where you will automatically be in the state that's opposite to the design state. For example, if you said the current design is the end state, the state in the animation editor will be set to the start state and visa versa. You can then change properties of layers and Protowire will animate between the two states. Currently Protowire supports animating the following properties:

  • Position
  • Size
  • Rotation
  • Opacity
  • Visiblity
  • First enabled fill colour and opacity
  • First enabled border colour and opacity
  • Text colour and font size
  • First enabled shadow's x,y and blur
  • Gaussian and motion blur

Animation Topbar

Pressing the play button will play the animation in Sketch. Below the play button you can change the direction of the animation and can have a different durations and easings in each direction.

You can create multiple triggers for the animation within the animation editor. Just create a layer or hotspot link and set the target to one of the state thumbnails at the top. For example you might have a button that shows an overlay and the close button within the overlay would link to the start state to hide it. When you've exited the animation editor the animated layers will go back to their original state. To edit an animation, click on one of the trigger links and press Edit Animation in the popover.

You probably don't want overlays showing in your design all the time as it will obscure the screen's main content. You can hide these layers and Protowire will automatically show them in the prototype when it needs to animate them.

Visibility

If an animated layer is hidden outside of the animation editor it will be made visible when it's animated. This is useful for overlays where you might want to hide them when you are not working on them. You can also "animate" visibility as part of animating other properties. This is useful if you want to make layers not clickable when hidden. If you animate a layer to be visible, it will be made visible at the start of the animation. And conversely if you animate the layer to be hidden, it will be hidden at the end of the animation. So you might animate opacity to 0 and visibility to hidden so the layer fades out and is not clickable at the end of the animation.

Off-Artboard Button

You might want to animate a layer from the side of the artboard. In Sketch, If you place the layer outside the artboard, it will be removed from the artboard. To get around this, the off-artboard button puts the layer 1 pixel from the edge of the artboard. To use it, select the layer and press on one of the blue rectangles.

Animated Symbols

To create an animated symbol, select the symbol's artboard and create a layer link with an animation action. To create a screen transition for a buttons create a layer link on the symbol instance and link to another artboard.

Overlay on a Separate Artboard

There are two ways to create overlays in Protowire. You can animate layers within the artboard or you can put the overlay on a separate artboard. The advantage with the second approach is that you can keep the overlay visible all the time and multiple artboards can use the overlay animation. Normally in Sketch when you create overlays the second way you convert the base artboard to a symbol and use it as a background to the overlay. When you create a link to another artboard and that artboard has a symbol instance the same size as itself and the symbol master is on the same page, it will be treated as an overlay animation rather than a screen transition. Multiple artboards can link to that overlay artboard making use of the same overlay animation.