My first Quartz Composer prototype using Origami

over 6 years ago from , Product Design Director & UX Lead

Hello Guys,

When I first opened the Quartz Composer today I didn't know where to start, but after watching a quick Origami tutorial I started moving things around :)

But I still have so many questions ... Is there any good place to find cool Origami and Quartz Composer resources?

This is what I did after a couple of hours http://dribbble.com/shots/1410837-Animated-Landing-with-Facebook-Origami-for-Quartz-Composer

This is my Quartz composition: http://cl.ly/image/1Q0n2c1A1a3e is this the ways to go?


  • Pasquale D'SilvaPasquale D'Silva, over 6 years ago

    Tighten up those springs. That's a lot of overshoot. A little subtleness will make your animation feel less noisy. Good animation should feel invisible.

    18 points
    • Jaime Ascanio, over 6 years ago

      Thanks for the feedback! :D I did not play much attention to the animations but just to getting working first

      0 points
  • Christine ChaoChristine Chao, over 6 years ago

    nice! thanks for sharing, now I have to give it a try too!

    1 point
  • Morgan J, over 6 years ago

    Very nice, could I ask which tutorial you watched?

    1 point
  • Matthew SaforrianMatthew Saforrian, over 6 years ago

    That's neat. Is this for a website or an application? If for a website how are you going to know the keyboard is opening up?

    1 point
  • Jaffar KhorshidiJaffar Khorshidi, over 6 years ago

    Pretty sweet for a first prototype! I've only just started learning it myself today.

    1 point
  • Bart Claeys, over 6 years ago

    Nice, thanks for sharing!

    1 point
  • Samuel ṢoṣinaSamuel Ṣoṣina, over 6 years ago


    1 point
  • Ben RegaliBen Regali, over 6 years ago (edited over 6 years ago )

    Really cool stuff for a first composition. I'm currently play with origami myself. Does anyone know if there is a way to "refresh" an image which has been edited outside of QC? Or do I have to drag the edited image in again everytime?

    UPDATE: Ha, was just a bit quick! If you drag an image on the image node you want to replace, every connection stays the same and just the image will be replaced. Maybe someone find that useful …

    0 points
  • Arthur TayracArthur Tayrac, over 6 years ago


    I explore Origami too and I see you try to use "Hit Area" on your map — difficult isn't it ? hehe

    Maybe can we create a community on Github with a library of repositories ? Or create a dedicated website?

    0 points
    • Jaime Ascanio, over 6 years ago

      Yeah the hit area was complex to understand at the beginning since I was changing the anchor point and it does not work very well if you change it :/

      It would be awesome to have a community for this!

      0 points