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.
Open the starting tutorial file in Origami. You’ll see we already have our three screens setup in Artboards on the canvas.
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.
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.
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.
Refresh the prototype and you should be able to click through the Camera, Boomerang and Share 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.
Do the same thing from the X in the boomerangs title bar to the boomerangs artboard.
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.
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.
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.
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.
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.
Here’s what your final patches should look like.
And our final prototype.