26

First go at Facebooks Origami

over 6 years ago from , Designeveloperographer

Decided to take a stab at learning Quartz Composer using Facebooks Origami instead of coding right away. Less then 20 mins later, after figuring out the basics of everything I had 4 different working interaction prototype animations to play with. So much quicker then tinkering in js, think I found me a new toy.

http://f.cl.ly/items/160D343O0T0y250i3o1C/thinkcraftcode-animations-origami.mp4

14 comments

  • George PapadakisGeorge Papadakis, over 6 years ago

    This is very well done.

    How about posting a screencast on how this came to be?

    19 points
  • Arma GetronArma Getron, over 6 years ago

    Besides the obvious advantage of interactivity would you say origami is quicker than using say After effects for this type of animation mockup?

    2 points
    • Jake ChapmanJake Chapman, over 6 years ago

      Definitely! I started my entire career doing motion graphics for movie trailers and this would of definitely took more time in AE. Animating each keyframe, instead I just duplicated patches and rewired them up to another layer. Plus exporting from AE can be quite cumbersome if you're trying to make a high quality video seems to counteract the idea of 'rapid' prototyping :) - This was super quick, for the screen recording of it all I used was Telestreams screenflow then cropped the video. Didn't have to worry about anything fancy.

      1 point
  • Nathan NormanNathan Norman, over 6 years ago

    The fade/bounce in share page is really nice.

    2 points
  • Matthaeus KrennMatthaeus Krenn, over 6 years ago

    Just curious: do you know about -webkit-transform?

    1 point
    • Jake ChapmanJake Chapman, over 6 years ago

      I do, I just didn't want to spend the time in code, plus learn quartz a bit. Another engineer friend of mine actually wants to write some code that will export the CSS and JS from Origami for the animations, that way you can quickly prototype and then export and test in a live dev environment.

      4 points
  • Roy StanfieldRoy Stanfield, over 6 years ago

    This is very nice… trying to understand if Quartz, JS or native prototyping is easier when working inside 100+ person companies. I'm currently diving into the difference between prototype tool and native prototyping and not fully sure if the game hinges on the speed of creating, the ease of sharing or the similarity to native adoption.. My first stab at trying to untangle it all is here: http://roystanfield.svbtle.com/looking-for-in-a-mobile-app-prototyping-tool

    0 points
    • Jake ChapmanJake Chapman, over 6 years ago

      We're a very small team of about 9 so I really wouldn't know for sure. Thinking about it though as long as there is a defined structure of showing prototypes, anything should work... the downside to writing actual code though is most of the time it's just thrown out, it's never really production quality code.

      I love the Quartz route so far because It's a simple file that can be added into maybe a Git repo along with a small screencast of the animation if showing stuff to stakeholders, where as anyone on the project working with prototyping has access to the source Quartz file and can resave a new version everytime someone wants to try a new interaction idea.

      1 point