The tools needed to follow this tutorial require OS X 10.8 or above. For a great four-minute intro to Quartz Composer and Origami, check out this video by Jay Thrash.

---

Last summer, a few of us here at Punchkick were brainstorming ways to add different item types to a feed. I had the idea of an add item button that, if held down, would blossom out the different item types so that users could choose one without having to go to a subsequent screen to select the item type. Some people got it, and some people didn’t—and I didn’t have the After Effects chops to put an animation together to demonstrate what I meant.

Fast forward six months and Facebook drops an awesome free product on our laps: Origami. Origami is a library for Apple’s Quartz Composer (QC) that makes it super easy to mock up interactions like this one. QC works by adding nodes, called patches in QC-speak, to your editor and wiring them together to create compositions that can be seen in the viewer.

After getting acquainted with QC and the Origami library, I was able to mock up this animation in no time at all. I fell in love with QC and Origami—and I hope that after using it yourself, you will too. Also, a huge thanks to Facebook for creating Origami, and to Apple for creating Quartz Composer.

Let’s get started and put together this simple animation from scratch.

1. Download all the things!

If you’re going to work with QC and Origami, you’re going to need QC and Origami. Facebook did a great job explaining how to get set up so I’m going to borrow their approach.

1. Register as an Apple Developer
2. Download and install Quartz Composer
3. Download and install Origami
4. Download and extract this tutorial’s source files

2. Fire up Quartz Composer & create a new composition

Once you’re all set up, open up QC. You’ll be greeted by a Template Chooser. For our purposes, we’ll be using a basic composition (selected by default) so make sure Basic Composition is selected, and click Choose. An almost-blank editor window and a blank viewer window will appear.

3. Set up your editor

You’ll notice that your editor has a Clear patch in it. We’ll need a Clear patch later, but you can delete this one for now (your editor should be empty after you delete the Clear patch).

From the Patch Library, add a Phone Dimensions patch, a Layer Group patch, and a Phone patch. You can drag and drop patches into the editor, or you can double click on a patch’s name to add it. Personally, I’m a drag-and-drop kind of guy but either way works.

Once you’ve added these three patches, wire them like the image below. For a basic idea of what’s going on here, the Phone Dimensions patch is telling the Layer Group patch what size screen we’ll be working with, and the Layer Group patch is telling the Phone patch what to display. Patches receive inputs on their ports on the left and pass data on their ports on the right.

After wiring your patches, your viewer window should display an iPhone with a blank screen.

Sidenote, at the bottom of the Patch Library you can read about what each patch does. There’s a lot of info to take in but take things one step at a time and it’ll start to make sense.

4. Add and rename assets

Double click the Layer Group patch to go into it. This is where we’ll be building our animation prototype. Things in this patch will get passed to the Phone patch for display.

Add a Clear patch to prevent any artifacts from appearing on-screen. You’ll notice that the Clear patch has a number 1 on its top-right corner. This represents what layer the patch is on. Only patches which affect what is displayed have layer numbers, so don’t worry if not all your patches are numbered.

After adding the Clear patch, it’s time to add the images contained in the source file. Note that when you drag and drop an image into QC with Origami, it will automatically create and link an Image patch and a Layer patch. Drag and drop the source images into the QC editor in the following order:

1. Background.png
2. Button 1.png
3. Button 2.png
4. Button 3.png
5. Plus Button.png

Adding them in this order ensures that the layer order is correct. Since we know they’re in the right order and we know that the Clear patch is in layer 1, we can go ahead and rename them each layer according to its asset. Name each layer by double-clicking the ‘Layer’ copy on each Layer patch’s top-left. Name them in the following way:

• Layer 2 -> Background
• Layer 3 -> Button 1
• Layer 4 -> Button 2
• Layer 5 -> Button 3
• Layer 6 -> Add Button

Whenever you’re making a composition, give your layers unique, identifiable names. It will make your life a lot easier when things start to get complicated!

Once you’re done adding the assets, you should have something similar to the image below. Note that I like to move the Image patch underneath its corresponding Layer patch. I think it keeps my editor environment cleaner, and it makes it easier to select both patches at the same time.

If you still have your viewer window open, it should display the Background and the Add Button. The other buttons are there, they’re just hiding behind the Add Button.

5. Wiring the first interaction

Let’s make it so that when you click the Add Button, something happens. We’re going to make the Add Button grow ever-so-slightly when clicked.

• First, click the Add Button Layer patch, and click the inspector. Let’s move this button to the bottom of the screen. Change the Y Position value to -480. The Add Button should now be at the bottom of the screen.
• Next, add an Interaction 2 patch, a Bouncy Animation patch, and a Transition patch to your editor. Things are gonna get cray.
• Wire the Interaction 2 patch’s Down output port to the Bouncy Animation patch’s Number input port.
• Wire the Bouncy Animation patch’s Progress output port to the Transition patch’s Progress input port.
• Wire the Transition patch’s Value output port to the Add Button‘s Width and Height input port. Note that you can wire a patch’s output port to multiple input ports, but an input port can only have one noodle wired to it!
• Inspect the Transition patch and set the Start Value to 138, and the End Value to 158.
• Inspect the Bouncy Animation patch and set the Friction to 4, and the Tension to 30.
• Finally, let’s connect the Interaction 2 patch to the Add Button Layer patch. You’ll notice that the Interaction 2 and the Add Button Layer patch have ports by their name. These ports (let’s call them link ports) let patches talk to each other. Drag a noodle from the Interaction 2 patch’s link port to the Add Button Layer patch’s link port.

You’ve done it! If you go to your viewer and click on the Add Button, you’ll notice it expands when clicked, and goes back to normal size when released.

Congrats, you’ve built an interaction!

6. Let’s catch our breath

Let’s take a step back and look at how this works.

• The Interaction 2 patch is passing the value ‘0’ to the Bouncy Animation patch
• When Add Button is clicked, Interaction 2 passes the value ‘1’ to Bouncy Animation
• When Bouncy Animation receives 1, it goes, “Hey friend, instead or abruptly going from 0 to 1, let’s ease into it.” You can actually see what it’s doing if you bypass it. Just connect Interaction 2 patch’s Down output port directly to Transition patch’s Progress input port and you’ll see what happens without our Bouncy Animation patch
• The Transition patch takes the Bouncy Animation patch’s output, and uses its value (from 0 to 1) to modify its output value (in this case, from 138 to 158)
• The Transition patch then modifies the Add Button Layer patch’s height and width, and our Add Button gets animated!

Now that we’ve got a solid understanding of how patches work and talk to each other, let’s zoom through this tutorial.

7. Animating the rest of the buttons

To animate the buttons, we’ll be adjusting their X and Y coordinates when Add Button is clicked. Button 1 and Button 3 will need both coordinates changed, while Button 2 needs only its Y coordinates changed, as it has no lateral movement.

Let’s start with Button 1

• Add a new Bouncy Animation patch and two Transition patches to your editor.
• Change the new Bouncy Animation patch’s friction value to 7 to tone down the bounce effect.
• Take one of your new Transition patches and re-name it ‘X Position’. Rename the other new Transition patch ‘Y Position’.
• Change X Position Transition patch’s Start Value to 0 and its End Value to -180.
• Change Y Position Transition patch’s Start Value to -480 and its End Value to -400.
• Wire the new Bouncy Animation patch’s Progress output port to both X Position and Y Position Transition patches’ Progress input ports.
• Wire the Interaction 2 patch’s Down output port to the latest Bouncy Animation patch’s Number input port.
• Finally, wire both X Position and Y Position Transition patches’ Value output port to Button 1 Layer patch’s respective X Position and Y Position input ports.

Onto Button 2

• Copy and paste the new Bouncy Animation, and Y Position Transition patches to use as a template. Note that since Button 2 only moves up and down, you don’t need to adjust its X Position.
• Set the Y Position Translate patch’s Start Value to -480 and its End Value to -300.
• Wire the Interaction 2 patch’s Down output port to this Bouncy Animation patch’s Number input port.
• Finally, wire Y Position Transition patch’s Value output port to the Button 2 Layer patch’s Y Position input port.

And now Button 3

• Copy and paste the Bouncy Animation, Y Position Transition patch, and Y Position Transition patches that are interacting with the Button 1 Layer patch to use as a template. We need both X and Y position since Button 3 moves diagonally.
• Change X Position Transition patch’s Start Value to 0 and its End Value to 180.
• We actually don’t need to adjust the Y Position Translation patch’s values, as it uses the same values as Button 1.
• Wire the Interaction 2 patch’s Down output port to the final Bouncy Animation patch’s Number input port.
• Finally, wire both X Position and Y Position Transition patches’ Value output port to Button 3 Layer patch’s respective X Position and Y Position input ports.

Fin.

Go to your viewer and click the Add Button. Your buttons will pop out from behind the Add Button. Awesome, huh?

Want some homework? In practice, this animation wouldn’t meet our required needs as someone sliding their finger from one button to another would turn off the requirement of the Add Button to be pressed. Play around with the Hit Area patch to fix this (hint: inspect it and turn on ‘Setup Mode’ to get a clue of what it does).

If you have any questions or comments, you can find me on Twitter. For updates on our blog, follow us @PunchkickMobile. Also, be sure to join the Origami Facebook community to talk Origami with the experts, and to get the latest Origami news.