Origami 2.0 add interaction and animation to your designs

The most basic patch. The layer path. Everything that should be displayed in your composition will end up in a layer so as it may seem really basic is very good to pay attention and learn it correctly.

Border layer patch was created for easily adding borders to your layers. This is useful for showing your clients where they can interact with the app.

Learn about the button patch and how you can easily create buttons that receive interaction without even the need of designs.

Learn how to toggle different animation states to be able to create animations with a transition.

The most basic animation. The classic animation will let you easily create animations with different curves.

Learn how you can connect remote patches together in this lesson.

Spring animations is the new thing to be, so learn how you can easily create them in Origami thanks to the new Pop animation patch.

Sometimes you need to add a delay to an animation so this patch will help you do so if you know how to use it. This lesson teaches how to use the delay in your animations.

A lot of the times you need to be able to scroll through your design, can be to show something or to allow the interaction by itself. As this is really needed, in this lesson you'll learn how to easily do it.

Sometimes you'll need to loop an animation for your prototypes. This lesson shows you how you can easily do it.

This is a really important lesson as you'll learn a tip that a lot of times nobody knows. How to connect multiple outputs to one input? As you may know, Quartz Composer doesn't let you do that, but thanks to this lesson you'll learn how you can do it.

Take a look at more than 100 patches available for you in Quartz Composer. Don't just limit yourself to Origami!

The keyboard is a crucial part when you are working with forms or inputs and you want to showcase the use case of clicking on an input. In this lesson you'll create a reusable keyboard show/hide patch that you'll be able to use across your projects and compositions.

Creating reusable patches let's you boost your productivity as you'll be able to just add your patches without the need of creating them from scratch. In this lesson you'll see how to create the reusable keyboard patch so you can use it in the future in your compositions.

Some people think that is not possible to use Origami and Quartz just to connect simple screens and showcase your designs as it might be really complex. Well in this lesson you'll this that this is just a myth. This lesson will teach you how you can easily showcase your designs doing screen connections really quick.

This lesson will show you how to create a sliding menu animation like the so typical hamburger menu.

Learn how to present content to the user using a small and nice animation that will boost your animation designs!

In this this lesson we'll create a parallax animation effect with a combined bounce animation. You'll see how easy it is.

Now it's time to try it yourself. Check this exercise explanation and try to do it by your own. If you struggle with it just continue to the next lesson to see step by step how to do it.

Did you finish the exercise? Now it's time to check the solution explained step by step so you can follow and compare your approach with the one presented here.

This lesson will teach you how to revert the existing transition that we have so we can go back to our initial animation state.

Check and learn the Origami keyboard shortcuts that will boost your productivity once you learn them.

If you are here, that means that you successfully followed the course, congratulations! Check my last tip and start prototyping and adding interaction and animation to your designs!

Find in this bonus lecture a collection of resources to get inspired and learn from other people ideas. This is the quickest way to start with your animation prototypes, all for free.