Skip to main content

Creative Bloq is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission. Learn more

Build an interactive photo viewer prototype

09. Alpha port

Select the Transition connected to the Alpha port, and set its Start and End values to 1 and 0 respectively. For the Transition connected to the Scale port, set the values at 1 and 0.95.

10. Progress

Now, if you select the Transition patches and toggle their Progress ports from 0 to 1, the Start and End values you entered in the previous step will be sent to your Layer .

11. The fun begins

Here's where the fun begins. Insert a Switch and a Pop Animation into the Editor. Connect the On/Off port to the Number port and then connect Progress to the Progress ports of both Transition patches.

12. Animation values

Select the Switch patch. Double-click the Flip checkbox, and watch your Photo Grid fade out to the background. Play with the pop animation's Bounciness and Speed values.

13. Add in an image

Now, let's add our other image. Drag Photo.png into the Editor window. Again, an Image and a Layer patch will appear, and you'll see a large photo appear in the Viewer. Double-click the title to rename it 'Photo'.

14. The last transition

Next, Insert three Transition patches. Attach the first two's Progress ports to X Position and Y Position on your Photo layer, respectively. The last Transition we'll attach to both the Width and Height ports.

15. Set your end values

Set the Start and End Values of the X, Y, and Width/Height Transition patches to the following values: X Position: -213, 0; Y Position: -93, 0; Width/Height: 212, 640. Then, connect your Pop Animation 's Progress port to the Progress ports of each of these Transitions .

16. And you're done

Finally, insert an Interaction 2 patch and connect its Click port to your Switch's Flip port. This will trigger your Switch when you click anywhere in the Viewer. That's it!

This prototype just gives a glimpse of what's possible with Origami and QC.

Words: Austin Bales

Austin Bales in a product design manager for Facebook. Follow him on Twitter at @arbales. This article first appeared in net magazine issue 261.

Like this? Read this!