Screen Transitions

Create screen flows.

This lesson will walk through how to create transitions between your screens in Origami. Origami 2.0 introduced a faster way to create flows between screens called Quick Interactions.

We are going to recreate the Instagram Boomerang interface, with scrolling behavior in one of the screens. It even has some of the more advanced iOS behavior such as offset as the screen moves.

Getting Setup

Open the starting tutorial file in Origami. You’ll see we already have our three screens setup in Artboards on the canvas.

Origami lesson starter file
Origami lesson starter file

Creating Quick Interactions

To create a Quick Interaction, click on the layer you’d like to trigger the Interaction from, then click on the Quick Interaction icon in the toolbar. Then click on the arboard you’d like to present. You can also Ctrl + Drag from the layer to the artboard.

You’ll see a tooltip where we can choose between a tap, double tap or long press interaction. As well as the option to present or dismiss the screen. Click Add to create a quick interaction with the default options.

You’ll notice that creating a Quick Interaction will automatically generate a corresponding patch in the Patch Editor. Quick Interactions are just a shortcut for creating Interaction patches.

Quick Interactions in Origami Canvas
Quick Interactions in Origami Canvas

Creating a screen transition with patches

Let’s try creating this next flow between the boomerangs screen and the share screen using patches. Select the boomerang we want to add the interaction to from the canvas. In the layer list click on the circle icon on the Open Share layer. Select Tap to add a tap interaction.

Adding an Interaction patch from the Layer List
Adding an Interaction patch from the Layer List

Now, with the Share screen selected, drag from the tap output of our new interaction patch to the present property of the Share screen in the Inspector.

Connecting the Interaction tap output to the Present property in the Inspector
Connecting the Interaction tap output to the Present property in the Inspector

Refresh the prototype and you should be able to click through the Camera, Boomerang and Share screens.

Dismissing Screens

Now let’s setup our dismiss interactions. We’ll do the rest of these using Quick Interactions.

Control drag from the back arrow in the title bar of the share screen to the share artboard. This will trigger a dismiss animation for the share screen when you tap on the back arrow.

Adding our Share screen dismiss transition
Adding our Share screen dismiss transition

Do the same thing from the X in the boomerangs title bar to the boomerangs artboard.

Adding the Boomerangs screen dismiss transition
Adding the Boomerangs screen dismiss transition

One thing to note when creating multiple Quick Interactions, is Origami will often stack these generated patches on top of each other. So double check that your new patch isn’t being obscured if you’re not seeing it show up.

Changing transitions types

One thing that we’d like to change is the transition between the Camera and the Boomerangs Screens. In the final prototype, the Boomerangs screen animates up from the bottom instead of in from the left.

Select the Boomerangs artboard, then in the Inspector change the Transition property from Push to Modal.

Changing transition type to Modal
Changing transition type to Modal

Now clicking on the thumbnail should bring Screen Boomerangs up from the bottom. You’ll notice this also updated our dismiss transition.

Adding a scroll interaction

We can also add a scroll interaction to the photo thumbanils on the Boomerangs screen.

In the Boomerangs artboard in the Layer List select the Boomerangs group. Click on the circle icon to add an interaction and select Scroll Y.

Adding a vertical scroll to the Boomerangs group
Adding a vertical scroll to the Boomerangs group

By default Origami will set the scroll bounds to the parent container of the layer you add your scroll interaction to. So in this case the Boomerangs group will scroll within the Boomerangs artboard.

Adding an offset to our transition

One final touch we can add is a horizontal offset to the screen we’re transitioning away from to mimic the behaviour in iOS. This will only apply to the transitions that are using a Push style and is entirely optional.

Adding an X Offset to the Boomerangs screen
Adding an X Offset to the Boomerangs screen

In the Layer List hover over the Share Screen, click the circle icon and add an X Offset Outputs patch. This patch will output the X-axis values of the Share screen as it animates in and out. We can then pass that output to the Boomerangs screen so it will offset animate as the Share screen gets presented and dismissed.

With the Share screen layer selected in the Layer List, drag the output of the X Offset patch to the X Offset property of the Share screen in the Inspector.

Connecting the X Offset patch output from the Share screen to the X Offset property of the Boomerangs creen.
Connecting the X Offset patch output from the Share screen to the X Offset property of the Boomerangs creen.

Now when you present and dismiss the Share screen, you’ll see a nice offset animation as the Boomerangs screen animates out and back in again.

Wrapping up

Here’s what your final patches should look like.

Patch Editor
Patch Editor

And our final prototype.

Final Prototype walkthrough
Next Up

Timed Animations

Create time-based, automatic animations.