Screen Transitions

Create screen flows.

Creating screen flows in Origami is easier than you might think, and still allows for some more complex interactions within screens.

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.

Screen

The starting tutorial files have three Screen layers set up already. If you need to add more, click on the New Layer button N and type to find Screen.

Screen start state

Screens are presented by default, so right now, they are stacked on top of each other. Click Screen Share and change the Start State to Dismissed.

Restart the prototype by clicking on the Restart Prototype button in the Viewer toolbar, and then repeat the process for Screen Boomerangs; click on the Screen Boomerangs layer, change the Start State to Dismissed, and then click the Restart Prototype button.

You should now see Screen Main by default, with all other screens hidden.
You should now see Screen Main by default, with all other screens hidden.

The last screen is Screen Main. It is a regular Group layer since it is not going anywhere.

Linking screens

The first screen transition is from Screen Main to Screen Boomerangs. We need a Hit Area to take us there.

A Hit Area named Open Boomerangs exists within Screen Main, covering the thumbnail in the Viewer. Make it interactive by hovering over Open Boomerangs, clicking on Touch, then clicking on Tap.

Connect the Tap output of the Open Boomerangs Hit Area to the Present property of Screen Boomerangs. Tapping the thumbnail in Screen Main should now open Screen Boomerangs.

You can also drag to the layer name in the Layers panel. The layer will expand to show its properties.
You can also drag to the layer name in the Layers panel. The layer will expand to show its properties.

We don’t need to add any Switch, Pop Animation, or Transition patches, because Screen handles all of this for us.

Linking back

The next thing we need is a way to get back to our Screen Main. A Hit Area named Dismiss Boomerangs has already been created for this purpse, inside of Screen Boomerangs.

Like before, make that interactive by hovering over Dismiss Boomerangs, clicking on Touch, and then clicking Tap.

Our new Interaction patch is going to affect Screen Boomerangs. Click and drag on the Tap of the new Interaction patch and connect it to Dismiss Screen Boomerangs.

Like earlier, however this time selecting Dismiss instead of Present.
Like earlier, however this time selecting Dismiss instead of Present.

Now tapping on the cross in our prototype should take us back to Screen Main, and clicking on the thumbnail should take us to Screen Boomerangs.

Changing transitions types

One minor detail is that the Boomerangs actually come out from the side in this prototype, whereas in the real app they come from the bottom. Screens in Origami support both of these transition types.

Go to the Transition property of our Screen Boomerangs and it from from Push to Modal.

Now clicking on the thumbnail should bring Screen Boomerangs up from the bottom, and tapping on the cross should bring Screen Boomerangs back down.

Finishing the flow

Our last Screen is a closer look at the first thumbnail, called Screen Share. Like before, a Hit Area has already been prepared for this, called Open Share.

Add this Screen to our flow by hovering over Open Share, clicking on Touch, and then clicking on Tap. Like before, connect the Tap output of this to Present Screen Share.

Connecting the Tap output to Present Screen Share.
Connecting the Tap output to Present Screen Share.

Tapping on the first thumbnail should now take us to the Share Screen. The last screen transition we want to add is returning back to Screen Boomerangs.

Again we’ve already set up a Hit Area for this under Screen Share called Dismiss Share. Hover over Dismiss Share, click Touch, and then click Tap. Connect the Tap output of this new Interaction to Dismiss Screen Share.

Interaction within screens

We should have our whole screen flow worked out now. Anything we want to do within screens is just as easy.

For example, we can make the Boomerangs grid scrollable. The Boomerangs layer itself goes beyond the height of the Viewer, with a few more thumbnails.

Open Screen Boomerangs in the Layers panel. Hover over the Boomerangs layer, click on Touch, and then click Scroll Y.

Scroll Y because this will be a vertical [Scroll](../../documentation/patches/origami.scroll.html).
Scroll Y because this will be a vertical [Scroll](../../documentation/patches/origami.scroll.html).

Offset

Offset within screen transitions is a standard iOS Push transition behavior, however not crucial to creating screen flows. To create an offset in this prototype we need to first know what the Screen Share offset is.

Hover over Screen Share, click on Touch, and then click the X Offset output.

We can interact with both inputs and outputs.
We can interact with both inputs and outputs.

You might offset change as we go between the two screens. Connect this outputted value to the X Offset property of the Screen Boomerangs by clicking and dragging into the Layers panel.

Now when we go between screens, the outputted Screen Share Offset affects the Screen Boomerangs Offset input too.

Next Up

Timed Animations

Create time-based, automatic animations.