Origami 2.0: Add Interaction and Animation to your Designs | Adria Jimenez | Skillshare

Origami 2.0: Add Interaction and Animation to your Designs

Adria Jimenez, Software Engineer, Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
29 Lessons (2h 20m)
    • 1. Welcome to the course

      2:29
    • 2. Course Resources Download

      0:32
    • 3. Learn how to use new Origami Quartz Composer features

      3:52
    • 4. From Origami to Code, exporting to code

      3:51
    • 5. Origami live and presentation mode

      3:38
    • 6. Learn how to export the right assets for your compositions

      2:58
    • 7. Exporting your designs and updating them real time

      7:28
    • 8. Adding a border to a layer

      2:56
    • 9. The basic layer, knowing the most useful patch

      3:22
    • 10. Creating fast buttons for adding interaction

      5:06
    • 11. Switching states to create animations with a transition

      4:59
    • 12. Animating our transitions with a classic animation

      2:15
    • 13. Connecting patches remotely

      5:46
    • 14. Spring animations and code export

      3:11
    • 15. Delaying your animations in time

      4:08
    • 16. Adding scroll interaction to big designs

      6:17
    • 17. Looping an animation

      3:47
    • 18. Connecting multiple outputs to one input

      7:10
    • 19. Note on Patches

      1:33
    • 20. Showing and hiding your keyboard when needed

      7:30
    • 21. Creating a reusable keyboard patch

      3:31
    • 22. Connecting app screens to show user flows

      6:08
    • 23. Sliding menu animation

      9:14
    • 24. Presenting the content to the user with an animation

      8:02
    • 25. Application parallax effect

      9:57
    • 26. Creating a lightbox exercise explanation

      1:25
    • 27. Creating a lightbox solution

      9:00
    • 28. Lightbox solution, dismiss the lightbox

      8:03
    • 29. Course overview and thank you

      2:09

About This Class

Learn how to easily and quickly prototype, add interaction and animate your mobile and web designs with Facebook Origami and Quartz Composer without coding.

This course will teach you step by step how you can use Origami to create prototypes and add animation to your designs. If you already tried to read the documentation on the website and you find it quite confusing, then this course is for you.

Start showing your designs with interactions and animations and look at your clients reaction!

Don't lose more time with static designs and join the animation and interaction era.

Transcripts

1. Welcome to the course: Hello. My name is Andrea on. I created this course because I'm an iris developer. Nine years engineer on with a site on design. So I really like design. I'm designing things on my free time and I'm really specialized in prototyping tour. I have other courses for another course for course Composure. Another court for framer. Andi, These is my course on origami. So I'm really specialized on prototyping tools for tools to add animation and interaction. And when Facebook released this new version off origami I needed I knew Suri that I wanted really to trade out onto test it. So I've been using it for a while. I've been doing some prototypes with it on. I thought that now it was the moment to create a course to showcase how you can create amazing thing things with origami. So the courses is structured in different bars. You have a part for patches where I explain what most of the patches off the library does. Then there is another pile where you will see some of the flows that are the most used in the application applications in the designs that you will create. And then you have from challenges on exercises, so you can see how a work and how you can work, too, so you can get some of my tips on some off my ways off working. So Ah, now that you know the ISS weaken, you can go ahead. You can start with the course, and you can start by the first section that we will see a little bit how the interface work . What are the new things that the origami adds to quash composer on? Let's hope that you can follow the course. You can follow it until the end. You have me for through all the course, so if you have any dubs or you need help, you can ask any questions. I recommend that you said the they age the setting so you can see the course in nature. Equality and that's it. That's the animation I created for this welcome speech. Hair easy. You can. You will be able to download it later if you want, so you can take a look. So let's go ahead and let's start with the curse. Welcome 2. Course Resources Download: as the breath from there's an army toe upload files or resource is I created these website this page where you can always go and grab. The resource is needed for these cars, so go go ahead. Now open a new tab owner or in the window and had to go the skills a poor that com slash origami dash resource is. And there you will have the resources needed for these cars to be completed free to download. 3. Learn how to use new Origami Quartz Composer features: whenever we opened Quest, composure. And we want to start a new origami project instead of using the basic composition and billing it by ourselves. And now we have this file new origami file. So you click Newer gonna file and you see that we already half the phone created with a layer group on be were on a well first in orderto seat properly, we have the window resized 2/3 where you can see and my knuckles inspector, where you can see the editor on be were being your screen so distantly this new origami template has, as they were saying, the Bueller size on the Layer group on the viewer. Inside the Layer group, we have one feel layer. So basically what he's doing is changing the color in or a background from the viewer. I'm gonna go back to the parent and let's see some of the news that we have in this new version off Oregon Mia, origami Chew the zero. One of the things that we have is that a There is no need to use the badge inspector like like we were using before, because from here we can directly change things like for example, if one If we want to change the type off phone if the off the Bieber Sorry. Instead of going to the patch Inspector, weaken, double click on the device when the type story on, we can directly change it from here. As you see, you can change on its updating. So there's no need to go to the match, Inspector. Same for orientation. Andi All Thea other things. Another another thing that we can do for the number values. I'm gonna disconnect this from here just for a second. A. We can double click toe every them that was already possible before in the not the version one of origami, but the next one. And we can slide from here to change the value directly without the need to go to the pageant. Specter. So that's very nice. A and we've got now we don't need the toe. Have the patch Inspector always open here. So we have more space, more visibility, just the editor on the viewer. Another thing that was a bit to the version of origami is the ability as us with so previously to go faster, even the pats Inspector. But you have a another way we can accept, for example, X axis these inside layer group. Andi. Let's let's create the layer with just pressing the l and what I was saying, Yeah, the other a bunch of shortcuts. So, for example, now if we want from, we want toe make a transition from the capacity we can most over rapacity just really motion booting the most over capacity, and we can press de on. We see that a transition appears with the value automatically connected to hear the same goes, for example, for animation. If we want to add animation now, here we just mosey over the progress. We can heat a and we see that Pope animation appears connected. So as we see, there are a couple of short cuts. It's not for all of the patches where there are some shortcuts that it can be used in orderto go directly to the new patches 4. From Origami to Code, exporting to code: another cool thing that was other in this novel new version of origami and that was really requested in the past by by a lot of users is the option to create code from badly from origami. So as you can see here, I have thes Ah, layer this a white square on it has, ah small interaction with the switch on animation We see later on how to work with these. But just as as ah, introduction to these feature it does something basics, just basic transition. Ah, you can click on this icon in this origami icon on we have here coat export. We have IOS android. And with it would take, for example, in the US now exclude is opening and we see here the coat A We have some quote generated for eyes. OK, that you would say, Well, that's school. I'm the designer. I do resign. I click on one button, I explore the coat, I send it to the developers and the developers are so happy. Well, that's not exactly as as it is. It all depends on your development team. The people that is working in the application if they will be able to use that or not. The first thing I'm going to say is that, for example, for us Ah, Facebook. This origami option is using the Pope library as we can see here in the import pope. What is the Pope library? Well, it's a frame Ah, library framework. A set off classes that a Facebook build toe easily work with animations in IOS. So, as I was saying, it depends on your development team if they can use it or not. Also, for some developers, it's very nice to have these even this coat, even if they cannot use it, because they can see the values that they need toe use. Like, for example, we have spring bones nous. We have five spring speed, then on they can reuse these values. For other developers, it's much more much easier to have the choir's file Andi opening it on work, direly from with it and extracted values from there. The same applies to under it. So if we go toe origami called export on under it ah, you see that they are using the rebound library from Facebook to its library for spring animations like the pope is for you. as well. They have the rebound for 100. Same applies also for the Web. So if we go toe web, we see some JavaScript code here in this case on day air, using also the re bone library JavaScript library to create the animation. So if you're the only developer on, you're creating everything that could work and work for you. If you're in a team on the team off, developers have already the application done. These may not work for them, or they can include the library and use the library. That's upto they chose. But anyway, these is an option that has Bean really requested. As I said, it's not a copy paste and you have it in Europe. Not at all. It normally needs some tweaking, but can really help the team off developers. 5. Origami live and presentation mode: one of the newest thing that they have. It fits. You got it to origami. Is the life preview what they call the origami life? So what I have here in the screen my skin is small, so I don't have enough space for everything, but I'll try to show it on the right side. Real. The left side. I have the iPhone connected. So it's recording. It has now the black screen. I'm gonna close it. So you see on I have here the origami icon. So the Oregon application is free. You can get it from the APP store. Ah, here half the every term. Andi, here I have the be Were I have something really simple. Ah, layer a square layer on on information with an interaction. So when I click, you see the layer appears as I have the my phone connected. You need to connect the phone, be a cable, so no, not be. Ah, WiFi doesn't work. You need to connect your phone via cable on once you open the I'm gonna put the phone assuring the fun. But here So when you open the origami application in your phone, your phone. If it's cranked it be a cable will be available here. I should hear it say's connected iPhone actually makes touch me. Okay, So from now on, whenever you interact with your and composition in your phone in your device, it will appear it will be re previews directly. First of all, of your work on Bennett will be reproduced on the screen shows. You see, here's my I'm not using the mouth. I'm just touching the phone. Here's my finger on the iPhone on your seeds being re previously show. That's really, really cool for presentations of you need to do presentations. You can play with your phone on and put a on your computer in the Beemer, the full screen. So as you can see here, the users can see what you are doing, and you can prison. Another thing that the added in this version is the ability to control how the display in full screen is made. But in order to tweak these, you need to use the keyboard. There's no way to do it via menu, so we have the H key to tackle the hand you see. Now we have the F G to go into full screen. Even I'm changing the B were but everything still works as you can see him. So we have the f key toe toggle the four screen on. Then you can play with the plus and minus Kee kee's toe change the background. So, for example, we have this nice background here and we can keep presenting. We can remove the hand. We can do what we want. Well, all of these be were custom is ations can be then without the phone, so there's no need to have your phone black in. I was just showing the origami life, but again is H for the hand F for the four screen and miners and plus for screeching the have a level backgrounds. 6. Learn how to export the right assets for your compositions: whenever you need to prepare your assets to be exported, you need to always take into account. And you need to think how the ashes should be exported because that's how they will need toe interact inside Quest Composer. So, for example, here, if we would like to to do these many of hearing this hamburger menu, we could do several things that the fastest on better thing to do is, as these are, that's this section will not be scalable, because what we want to show in our origami composition will be the hamburger menu interaction. There's no need. There's no need toe export all of that with a lot off all of the images and make it the school of all and shortness or so what I would suggest is that we could export these as a whole, these page as as a whole. So I'm gonna go, Ah exported that a PNG asari Asia jpg and I'm gonna name it background. So we know that these is the background off our composition. Then we will eat this piece that that will be a sliding from the left. But as you see the bar here, it's over. Our design so you can do two things. One thing is whenever you export these cyber, you make it shorter. So it goes of all the this bar or the other thing that you can do is you can just barely export the number. So I'm gonna go toe toe here to the to select the night. Baron. I'm are going to make it exportable. I'm gonna export it as a JP. You can export them as a PNG, but if they they're not gonna have transparent Caesar jpg turkey, so I'm gonna export it. Actually, JP zem on number. It's totally fine. This piece that we need to export for this case is the A menu, the site many show I'm going to select it and I'm gonna export these site nap, draw our I'm gonna can make it exportable. Andi, I'm gonna exported this case is a PNG because it has this transparency here to show the bar below show. It's totally fine. I mean, I'm gonna call each side, so we should have the background. Then we have the number that will be just the number that goes over everything on. Then we have the sidebar that will be the thing that will be. It's calling. So let's go ahead. Let's go toe course composure on Do you can start doing your composition? 7. Exporting your designs and updating them real time: the new version off Origami lets us export our designs from sketch. So I have here sketch file with the design with, ah, shipping car design. Andi, I'm going to use these as a background for my my my quest composure composition. So the first thing that we need to do is I'm gonna safe that because it's not safe. So I'm gonna call it card, and we're gonna goto the sketch toolbox if you don't know skits. Toolbox is an application for installing sketch plug ins. So if you don't have it, you can go to a sketch toolbox that Come on, you can grab it from here. You can download it from here and install it. Install it on your Mac. So once you have sketched tool works, we can come back here and we're gonna search for Rory Origami. Sorry or you got me. So we have here these sketch Oregon export that we can stall just by clicking in start here and now it's installed already and we can go, Toby one get help because we have here the instructions you can Ah a keep the lesson as we're gonna go through them. But in case you need them? They're here. So you can always take a look at them when a close skates. Toolbox on. Now we should have it here. We have plug ins on. We have the sketch. Origami export. Now that we have the plug in installed when we need to do is toe check what we want. Export A right now in this example, we just won the background. So it will be what we'll see later. I will do like if we wanted to explore something else like imagine, for example. We want export these image here in order to do it. We just need toe upend. Ah, an asterisk at the end of the group name Show by a pending ah, an asterisk At the end, we will make these group flattened into an image and exported as as an image with this image name. I'm gonna change it. I'm gonna call it second image. Ah, the same applies for for just for the lay years. So imagine, for example, that I want to export these divider here instead of using the the asterisk I'm going to use a plus. So having a place at the end, we create the Ah, a PNG file for these For these image, I lost the image now here for the live either So adding a plus at the end, it will add it will export a PNG just with that image again, if you want just export the layer. You just that A plus. If you want to export a group of four group you need toe at four groups of one images. When I am sure you need to add an asterisk at the end that we export the full group as they were seeing now a we want export the background. So I'm gonna do a nice stories here. So all of these will become one image plus the other ones the other two that I did the match under IB either. Now that we have everything said, we can go toe blinds scheduling im export on. We're running. So the first time that we run the the application, the flagging it will ask us which is the resolution that we're working on. So you need to specify the resolution you're working right now. I'm working with the the normal restoration of the routine associates Safe on as you see one find their folder appears with with a folder. So this folder is not located in your in any of your documents place. It's located inside a so you can see here. Ah, way path. That because sketch is running in sandbox mode from from apple. Andi Ah, the files are generated here. Show Then try to find them or to copy them because then it will not work the flag in every time you run the plugging the files will appear here. Not that we have the files. We can go toe to the question composure I'm gonna do, Ah, new origami file. Let's precise these and we can go inside of our layer group and we can drag the images so we can go inside the fuller, which is the iPhone six on. Then, from here we can pressing. We need to instead of just dragging the much like before when for importing images, intercourse, composure, we need to while dragging. Ah, well before dropping, keep breast common on options. So we just push. Come on, option. We release and we see that the image appears here. Andi, It it has ah, purple color. So instead of having the of I just really is an image is instead of having the black color , it's it has a purple color. That's because it's connected. It's a life image. So it has a connection with the one in sketch. I'm gonna move thes or elevate the Y position. Okay, so like this. So now we can go back to sketch where we would do here whatever we need on, we could go back to sketch, we could update something. Imagine that now, instead of rowboat, it says what you drop, but okay, so now when we see it safe and we go toe plug ins Ah, sketch Oregon export and we do it again. Or we can use a shortcut. Shift out. Common. Oh, we see that another folder appears on when we go back to quash composure. The much has been updated, as you can see here, wide road. So the image is connected toe our sketch file on whenever change. Whatever changes that we do there when we export them, they appear again here so that we can basically, whether we're doing is we're connecting. The files were connecting the images. So always when you export something, there eat a reflects on in our quest composer compositions that really nice. That's a really cool a vision for course, composer and ah, yeah, you can work. You can work with them. 8. Adding a border to a layer: one of the new patches that we have in Origami Chew is this border patch. So basically the this just creates the border. It has the enable or disable thickness color on Alfa. They're self explanatory. So let's see, How can we use the border bath? First of all, we need toe take into account that the border path needs to be inside. There'll a group show I'm going inside the main layer group. I'm going to create another league group because if we add the border here directly, as you can see, it's creating a border in all the application. If that's what you want, then that's what you already have it. But if we want toe at the border toe some other layer, I'm gonna create create any one group player up. Sorry. Their group on the image that is rendered by this layer group is gonna be in a new layer. So we have these layer on the image generated by our layer group. It's going to go toe this layer show now we can work inside. What I'm gonna do is I'm going to create a feel a year just to add some color on I'm gonna modify the pictures white here and hide. So let's go toe feel layer. We have it here. Let's added as a feel Let's change the color. I'm going to say this is a red Now it's feeling all of our screen with the red color and a I'm gonna add ah, border to eat. So now we have of the border color. I'm going to change the color. I'm going to say it's green. So we see the border These as you remember these words with the one here. It's being rendered below on the border is being rendered above. If we change the order, we don't see the border. So we want this first on this second. Okay, now we can go. Go back and we can change the pixels wide. We can say 100 on 100. And as you can see now we have the red feel the red feel layer with green corner, something simple. But it can help as if we needed a tow just to create a border somewhere. Especially, I normally use it for a highlighting things like, for example, if there is a screen and there is just one button, there is clickable. I just I tried toe at the border. Or or you can say, the user clicks somewhere. That is not the button. Just show the border show. The user knows where to click. 9. The basic layer, knowing the most useful patch: Let's see the layer. The most basic thing for your composition show this is there the thing that you will see most of the time and is the thing that will represent You're images on other patches on the screen. So I'm going to go inside the layer group on a I'm gonna at a new just layer. So we have a layer here, and as you see there's nothing on screen. Well, there's nothing to scream because we're as you abuse. As you see, there are a lot of properties in the layer. We have the anchor point, the exposition y positions that etcetera have with hate in much masking magic color. So why we don't see anything? Well, basically because we have with on height zero show right now, it's not doing anything. We can change that we can see 100 with on hundreds hate. And now we see we have I square. So ah, earlier it just by the fold. Just getting a color that we can change here on Egypt. Ah changes Well, it creates a square off the with on hide that were passion. But the layer does a lot more than that. So for example, I'm gonna delete this layer I'm going to grab an image on. I'm gonna drag it here. So as you see now, we have a new image path. But here that we can, we could if we want, we will work with that. A much should here, and we have it there. So, as you see, when you are at the new agreement, it creates a new layer. But we could have just just these image on with the patch Inspector. We could get the image from a fight. So when you have these image, you can connect it to a layer like we have here and with this image that it it's out putting the date them. We are connecting it to this layer and this layer, it's representing it on the street. So they were saying the layer is the most basic patch to shows to to show things on the screen. We could do something else. We could do, for example, a lawyer group. And as you see the layer group output on image so we can connect this image toe our layer. Right now, we have connected it, and everything that we do inside will be biz evil in this layer, so I'm gonna go toe feel a year. So I'm going to create a new field layer that basically feels the screen. I'm gonna change the color the green, as you see. No, the layer group is rendering an image on these image. You can see it by most by putting the your most over. And this image is being a output toe. The layer and the layer it's rending, rendering the image so again the layer something really basic, something you will be using out of time without even noticing, Um 10. Creating fast buttons for adding interaction: Let's go for the button layer going to go inside the layer group and here and run a search for button. It's at the in our space on I have it here. So the button a batch has some different things that you can see here. We have the anchor point that can be right. Now it's in the center, but we can put it in the top left and you see it's being moved to the left. We have the bottom left bottom center about them, right on a different option. Different options. This will make our but button move on ankle to this position. Then we have the exposition. And why position? If you modify those positions, you should take into account that they affect regarding the anchor point. So if we have top left on, we say, why position? Then it will be then from the tub. Live on. Remember that inquest composure. Positive values are up on negative are down. So we're moving. Why position than up? If we say center, it will move from the center so we can try to change center and let's go back to Ojito and then let's put then and you will see that it goes up from these position. Then you have with and head on height that Jiro is the default. We have a background image that we can put to the button on the background car. If we're not using the background color, we have a title that we can change. We can put this is a nice or police please press me on the the button changes. Then we have, ah title color off the baton that it's the color of the text and the phone name for the bottom. That's really useful if you want to create, ah, quick button with, for example, if you are prototyping. Ah, using these button lets you prototype really quick without the needing off the need of a design. If you have all design, then perhaps it's where to use just delay year as an image off the button where you have other properties like phone size, that we can we can change, we can make bigger. We have the title off said. If we want to move the title hopes here, Nige actually back. So because I'm trying to change the office it and enjoy opening me the color. Show that bag. Let's go to the patch, Inspector on, Like change the title off. Shit. I'm gonna move these show. You see what's happened? Changing on as you see, to go in the title, each going down. So as I was saying it, I'm gonna put back to zero. Then you have the corner ray views. It's 30. We can make it square on the opacity on scale. Actually, these ah on interact table layer so we cannot interaction to eat. It's gonna search for the interaction to patch. And as you see, it has thes input. Andi, the interaction to has an output so we can actually connect both patches. Now the interaction will be when a the user presses the button so we can try. We can search for ah double. Yeah, we have ah tuggle here. So, basically, whenever the interaction is using the down so the usually is clicking down on the button, we're gonna tackle the input on when the import totals. It will change from value zero to value one. I don't want a ballet one. I want to say, for example, value 100 on the output. Let's say will be the white position show. If everything is correct, we have the interaction to connected to the button we have the down in as an interaction connected to the Tuggle that will change the value from zero toe 100 it will out. Put it to the white position. Let's try it out. So going to come here, let's press the button and you see that the position he's changing him a present again on it goes back. Why it goes back. Because Egypt Tuggle Tuggle is changing. So every time that there is a down action, the input ISS struggled on in changing the value from 0 200 from 100 20 this value is being output it to the button. So you see something simple, something that you can use in your prototypes. Onda did that. That's the button much 11. Switching states to create animations with a transition: the switch patch. So basically the switch patch switch, But something so difficult a switch. But sh rich patch. Well, you have to imagine the switch patch like a light switch So you have a turn on to turn on the streets at turn off to turn off the switch on a flip. The changeover. Every Johnny will change toe off on it. If it off, it will change one like a normal street. This has three inputs and it has one output the same. Basically, if it's on our off shore, let's let's do an example. Let's go inside this layer group and I'm going to drag on image off a nice woman that I have here. So I'm gonna move thes around. Showed that and Easter of us. And we have the layer here Just for now, you see, is a little bit big. I'm going to scale it down toe. Let's see if that works. Because sometimes his body right now I can make it. I can change the scale. Now show I'm going to do it manually. Zero vote for a little bit less. Zero. The three. Okay, so I'm gonna use geo 30.3. Let's that our switch that we were talking right now here. What we're gonna do is we're gonna When the user presses the image, we're gonna switch from on to off. So we get a bigger image we want we will zoom in the image. This will just say it's on or it's off. Show the usually expressing or it's not pressing. So we need to transform these value the on off toe ah numeric value that will go to the scale. It will go from one sorry from Joe, the 3 to 1. For these we have the transition transition patch basically, as the description say's, it takes a number in the range of 0 to 1 show on or off on commercially to arrange, starting with the start value on ending with the end value. So I'm gonna connect the on off to the progress. You see that the line is orange because it says that Ah, basically, the Orange Line means that the actual value needs transformation. But the patch is doing the transformation for us because this batch expects ah, number on we understanding on off. But as I said, the badges making the transformation show all is fine on. We're going to say this that value will be zero. The three on the N value will be one free number. We can gonna clinic now the value to the scale and nothing changes because the initial easy to the three everything's perfect. Now what we need We need an indirection show Let's search for the indirection toe at interaction toe are layer Remember, the interaction has here ah, connection port that we can connect toe our layer because we want to make all over layer a toe work with the interaction show Now that we have it here, we can say When the user clicks down we want to turn on the streets for when the injuries a pressing We want toe turn on the switch on when the usual releases the top We want to say so, ab, we want to turn off the switch So let's try it out. We have this here. I'm going to move back The image in this place reach a little prettier on Let's see, shall we click here? Nothing happens because the interaction is connected to the layer. But when we click on the layer, the Jerome happens As you can see, it can leave the coastal pressed on. It's working. I can release on it goes back toe the very initial initial position. So basically, what we're doing, we're Ah, as I said, we're when the mouse is down or the usual expressing with a finger were turning on the switch and it's sending on here. So the progress changes the one, as you can see when impressing progress, say's one. When I'm releasing the up X here and turns down turned off story the switch. So it's sending an off signal through the to the transition. That basically means progress, Ido and it goes back to the start start value that it's geo the three. 12. Animating our transitions with a classic animation: I have here the example that I did before in a previous lesson that has, if we go inside the later group, we see that has the switch on the transition toe make the scale to change the scale. But as you see, these transition is really abrupt. So we go from zero 21 So what we gonna do now is just with a really, really simple and easy step we're gonna add in the middle off the value an animation. So we'll see that How easy is to do something that it's that goes so far from from Gina the one while Jiro the 3 to 1 in tow, our basic animations. I'm gonna move thes here to leave some room through these new patch and I'm gonna this clinic this scale. Now I'm going to go to the library and I'm gonna search for classic animation. Let's at the classic animation in the middle on the classic animation has three import show . The 1st 1 is the number that will be the value off the transition. Then we have the duration of the animation on. We have the course. So we have different cars. We have linear quadratic different quadratic types, the different cubic types, exponential types on DSI initial shrivel types. So basically, I'm gonna just a little bit the duration. I'm gonna just for now, the Geo, the Chew. I'm gonna connect the progress to this game. So now we can try on. As you see, these is already working pretty nice. So when I click, it does exactly the same as before. But with the animation that we can change here, the type or even the tech so as you see, it's really easy. It's really easy to add. Ah, just a classic animation toe. Our prototype that we had before Andi in the next lesson will see the different types off animations that we have. This is the classic animation. 13. Connecting patches remotely: there is a patch in origami. It's called the wireless patch that can be really, really helpful in some off the cases. So let's say in which cases this patch can help us. So, for example, I have here these composition that it has three layers in the site. Three empty layers, three weighed layers that you can see here on in these other side we have on interaction patch with a heat area and a tradition with an animation show. How we could Ah, can I finish this composition? Well, we could easily connect the progress with the scale. That's actually what it's doing. So when I hit here, the sketch off the layer is changing. That would be what we would, but imagine the gaze that you have these composition, but it's a little bit more complex on you have some other patches in between. The U one There are between the animation on the layer, so having these connection from here to here could be not complex. What could be he even below the other patches show it will be harder for you to know where actually is the connection from this animation patch to the layer going. So this is one case that it's that it's useful toe. It's helpful to use the wireless on. Let's see how we can So first thing that you need ease Ah, wireless broadcaster that basically what will be doing is broadcasting a signal. So the animation progress will be the signal that we wanna broadcast will be connected to the wireless broadcaster on Dhere. We gonna say the name, so I'm going to call it progress. These is already broadcasting value. So this is broadcasting already the value that comes in that comes from the input on each both guys casting toe all all the different and wireless that we have. Sorry that all of the different wireless patches that we have as a receiver. So I'm gonna add Now receiver here. You can create as many receivers as you want, so I'm just going to create one, and from this one, I'm gonna connect it to the scale. Before doing that, I'm gonna come to the Pats Inspector on. I'm going to say that well, it's done automatically, but they're basically want to say that the ah, then input that the broadcaster that's gonna listen to it's gonna be the progress. So we hit the progress on now this is already listening toe these other broadcasters shown From now we can connect to the scale off the three different layers Onda. We can see that it's already working. So these air broadcaster is broadcasting the progress value on these Other one is getting that value and applying it. So you see, you could have now more content here on these will not prevent the values from from transmitting. And you would see something really, really clear Another a option that could a be useful and that that it's perhaps more helpful than these because this is really helpful if you have ah, big composition and you want toe organize things. But ah, another thing that could be more helpful East if you have a these, for example, inside of a macro show. Let's treat the macron and the problems of the firm you have with Macros is that you cannot publish output. Either macro is rendering something. So in this case, for example, these macro is rendering the hit area so it cannot publish the output. If we could publish the output, we could say OK, the progress will be out. Put it on. We could connect this output to the pro show A. Here is when the wireless batch comes in hand because you can just do, ah, wireless part here, a broadcaster that will be broadcasting the value. Andi In outside the macron we have our receiver, so the receiver will be getting the value. So, as you see even now with these macro, that has no input and no output at all with just enable A We still have our composition working. So this is the most use case for the wireless batch. Also, another interesting thing for the wireless badges that you can. As I said previously, you can do as many as you want, so you can. And though multiple receivers on Ah, but all of them will receive the same para meter show. I'm gonna create another for progress on. I'm gonna connected here on you'll see how still work so you can have one birth caster on multi per receivers to receive that input. So these is also really, really handy 14. Spring animations and code export: In the previous lesson, we saw the classic animation showing a very weak link here with an animation, we double the state off the street as you can see him. So the classic animation is really nice. It has some basic animations, but it has two problems. The 1st 1 is that we can just the normal could curves without spring animations. The 2nd 1 is that it doesn't work with the code export from origami show. If we go to God, the toe code export and we export toe Irish under it or wept that we will see there's nothing why there's nothing because, as we we will see in the in another lesson that I talk about the coat export, the court expert just works with the Pope Library that a the facial guy state. So if you want to work with the with, if you want either toe springs and spring animations or you want to be able to export your cold toe, reuse it or to pass it to developers instead of the classic animation unit to use the proper animation. So I'm going to the lead the classic animation on Let's Go for the Bob animation here. Let's add a pop animation on as the classic animation. I'm gonna put the classic animation here so you can compare as we had the with the pope enemy with a classic animation Suri. We have a number on input number That's gonna be our transition value. And we have our progress as a notebook that will go to this game. Basically, it's the same as a classic animation, but instead of having aberration and a cure, it has the bounciness on speed to play with So we can deliver the classic animation on We can try and you see that it has. It does Ah, animation. With the spring we can change the bounciness we can put like for example, three on it will be more smooth. We can even change this beef that say hes another buck from the from the origami. So I'm gonna go back to Patch Inspector. I'm going to modify this bit here. Let's say we want a speed off. Three show now Deeds slower. I prefer the thin Okay, little. But then and we have it Now show now if we go toe the origami called export for Iris. You see that we have already the coat. As I was saying, We have a code because it's using the Pope library as we see here import pop. And we have, ah, the animation, the code animation for the Pope animation. 15. Delaying your animations in time: If you want to delay an animation, there is this delay, but that can help you do this. Let's use it now. So let's go inside the layer Group on. I'm going to create. I knew Layer. Let's say color will be yellow, for example. Orange. Okay, on the with will be 100. 100. So now I'm gonna add an interaction a transition, because we will transit from one value to another one on up up animation just to make it a little bit more. Ah, beautiful. So I'm gonna connect. Connect the interaction with the layer. Andi, I'm going to connect the down with the progress. So we have something toe change on. I'm gonna said the value will be I'm gonna move it down the square show the initial value will be zero, and the n value will be Ah, Hamlet. The value of the transition is going to go into the number on da ah animations. Gonna go in the white position. So let's try it when I click. Okay? It's We need Ah, struggle here. Gross. Okay, so now we have a down will be input here. The output will go to the progress. Andi Now we have it. So because what was happening is that it was just when I was pressing down, it was initiating the transition. But as the square was moving up, it was living my mouth. My kosher on it was stopping the transition. So now we have a week like we click. Sorry. Once it goes up with click again, it goes down. I'm gonna go bigger value. I'm going to say like I'm gonna go down Troll miners 400. And now it goes down. So I click up on now. Well, we want to do now is we want to include in this composition. We won't include the delay. So I'm gonna search for delay. Onda, we have it here, so basically, we can delay different things. We can delay the progress, for example, of the animation. Or we can delay our interaction, whatever you prefer. I'm gonna delay the interaction here, so I'm gonna make a little bit more of space to put the villi. I'm gonna connect the down interaction to the value on the value. So the input here, the really has three inputs charge the value. That is the thing that we want to delay. And then we have the duration of the delay on this. The style we can say, though delay always the value, or only when it's increasing or decreasing the value. So I'm going to say always on I'm going to say that I want the layoff one second. So whenever I click it was it with one second on, it goes down. If I click again, it waste. It waits one second on it. Gold shop. This is what the deal a patch is doing. As you see again, it's easy to use on. Ah can come in handy when you need it when you need toe, ideally between different animations. 16. Adding scroll interaction to big designs: when you have a big image a big design that you want Toe Scroll just by dragging it inside the layer group. It's not describable by the fall show. Let's see how we can do it. I have here ah, screenshot of the red eat application. That's huge. There's a lot off content insight on we gonna do these scalable. I also have ah, Heather that is sticky on the top. So we can just put the content below the heather and we can scroll through it. So for starters, always having the screens, the images to the phone on the heather. And I'm gonna say that the anchor point for read it for the right image is not the centre, but it's the top center. Eso we see sticky eso for a receipt on the top. The same for the for the heather. I'm going to say instead of center is gonna be top center show Now it just taking on the top. Once we got these, we're gonna use the A scroll patch just on the reddit image, not on the heather, because the heather will be sticky show it will be every time, all the time in place, but the Reddit image will be scalable show. Let's search for scroll and you will see these. But here the scrolls, it says Carter Layer, that's throwing an image to use connected, they imagine want to display blah, blah. So let's see how we use it following the instructions by the frame the facial guy. So we have some input on some open open a zoo. Always. The thing that we want to modify here, in this case is the white position. So we just need toe connect the Y position to the white position off the layer. The score patch get has an input off on image. So that's these image that we want to make scalable. So we're gonna connect our image, toe these image. I just did that. And you've seen that the that the the images moved away. Well, there is still things missing, so we'll see what we need to do. We need also to connect the scroll to the layer so the scroll knows which layer should scroll. And now we can try and we can see that the content is scrolling. Why is wrong? Why is not a paying correctly? Because we said that the anchor point was the top center. We should change that to be the center. And now we'll see that we have our scrolling layer as we wanted. I just see the the one below. It has the Heather all show. You would need to remove that heather on at a little bit off, offset to the scrolling. But other than that, Egypt. Let's see. Imagine that we've removed these. These double. We can remove it. Actually, I'm going to come here. It is not a life. Imagine winning toe. Import it again. Show That's That's good. Reto These Oh, it asked me if I want to come back to PNG, I'm gonna convert it and we will have some. You know, I'm gonna go back and let's go the other way around. So he said of removing the heather and having so we can play with the officer. I'm gonna got these. Sure. No, Well, have enough shade. As I was saying, it's not alive, he might show I would need toe and remove E. What I can do is, as it will be, a new image. It's here. I can just kill the layer and use these image instead of the other one show. These will go here on these regal here and we can get rid off the British one. We have no the correct emergency. Now we need to add some off it on top of the image so it doesn't get below the heather. Let's see, How can we can do that? There are some scroll settings here. Sure Settings on school, a bunch setting. So you can. There are a lot of things that you can you can play how those this settings work. Well, first of all, you need both. I have it both because we will be using both this time, but most of the time you need both setting. Just in case. If us now you're gonna use both at bands on normal settings, you should our connect the output off settings in the advance in the input off scroll settings on the output settings, off the score settings inside the input off scroll. So with that, both options will be taking into account. Right now, we don't need the both so we can kill these one. We just need the advance setting, so I'm gonna connect the output off settings inside the input off settings on the thing that I want to modify now is the page having wife I'm going to see Miners 100 Open 100 story should be a positive value, nor the negative because the parting is your waist positive on. We see that we already have about having should be a little bit less like, Let's say 90 for example, less. I could see that works, not fashion work. It never works for me than away 17. So now, as you see, we have a little bit off a little bit of having on we have I were, ah, scrolling image here. 17. Looping an animation: if you want a loop Animations. There is a way where you cow you can easily do them. So imagine we have this circle, for example, here on, we want to make it grow. So and this is if you don't know it's the circle patch. It's from course composure, and it draws a circle. So the next thing I'm gonna do is I'm gonna at a struggle because we will be toggling between one value on the other one will be the radius. The initial value will be zero that zero comma to do. You know, the true that's the actual Korean ray views on the secondary value will be geo the seven or , for example, we want this to be animated. So I'm going at an animation classic animation, and we gonna connect the old boot on the number on the progress on the A reviews. If you want to work because this is a units, it's not pixels. So if you want to go to war with pixels, we could add a pixel big filter, your needs batch. And we could say, for example, one of these clinic now bulletin pixels. Andi here. Two units. So here we could say now 100 pixels will be the initial value on the the last value will be 800 have been too much. We'll see. So, as you see, you can work because the circle it's it's a needs radius, not pictures to work. But you can easily work with units with big. So sorry and then compare them. So now if we talk about this input, we see that this is growing. So we talk about it again. Um, after changing it, it's it goes back toe the right value. So what do we need? Toe Loeb animation here? Well, we have the repeating pools because in question inquest composure, there's no way to say after you've finished the animation they started again. So there is a way you can use the repeating pools that basically what we'll be doing is sending apples after the duration. We specify here. So, for example, now it's one second oration, and we can say after one second, send apples. And as you see, it's sending a pools that is resetting our input on the animation he's changing. We can change the duration here. We can say, Okay, we're gon animation every two seconds, and now the animation happens every two seconds. So that's the way toe. Actually, a loop are animations. A. You need to think off the repeating poor's as we were thinking off the interaction patch. So when a user doesn't interaction, something happens. So these repeating pools will be our interaction every a whatever seconds. In this case, two seconds. We're gonna have apples central on interaction sin Andi With that, you can easily look through your animations. 18. Connecting multiple outputs to one input: the multiplex er is not part of the origami patches, but it's a much that you will need quite often show. That's why I decided to create desolation to talk about it. It's a little bit complex at the beginning, but at the end you will know how to use it. You will have practiced on. You'll see that it's really easy and that you will need more time that you more, more times that. Do you think so? A. I have these composition here that I created its basic Let's Let's have a look, honey. It has two layers. These one is the one on the top, and the other one is the one in the bottom on both half an interaction show when the user clicks clicks, but only the 2nd 1 This one is working, so when you click, there is a Tuggle. Tuggle goes for transition with animation show. If I click, it goes down, I click. It goes up just something really simple to showcase. Whether we want to do there now is that we would like Toa also be ableto total. These animation from here, the exactly the same animation birth, but from the other buttons toe So from the other layer we want to achieve is click here and this will move or click here and this will move so that both things work well. Ah, the initial thing that we would that we could say is OK, so we can connect the down from interaction to the input off the tuggle. But remember that it each patch just except one. Ah, but each input story each input off the path of the patch. Jews accepts one output. So if we connect this one, the other one gets disconnected. If we connect this one, the other one gets disconnected. So we cannot do it like this. We could also just reproduce the same Shoko Peon based Andi connected here and then the progress connected to the way. But we have the same issue. If we connect this progress here, the other one gets disconnected because each input just upset, accepts one value. So that's one that when the multiplex er comes in hands. So whenever we have an input that we want toe be able to provide more than one than one a values, we should use the multiplexing. So the multiplex, Sir is one thing. We have it here. We're gonna We will see now. But we also need index switch. We will explain now What is everything? Whether they removed the picture and we see that it says Beato a multiplex er beautiful is because it accepts any type off para meters. Any kind of perimeters can be. Number can be extreme. Can be that you can live it like these. Or you can come to the patch inspector and say that you instead of weird Well, you want a number because we will be sending numbers. But as they were seeing, you can just leave it at as we're dwell on, it will work also. So now the index which has different input You can specify how many importantly, one in the patch, Inspector. So right now we just need to because there will be two interaction so we can remove one on the same for the multiplex. You can a specify how many sources that you want. How many important do you want by having here? We just need to again. The basic Avia is that the index, which receive two different index whenever one of those index gets one value. So by the full it's sending zero a zero values 0000 When one of the index is off, the imports changes toe one it outputs in the index street Which input is being change? Show if we change here if we are If we connect not on the AP story undertone If we connect this one to the imp a jato on this one Also on the in Petitto on the improved one Suri Oh, this one on the in Poggio. Okay, so we have this one and then Pajero and this one on the input one. Now the index is being sent zero because that's the default. So it's being said is it sensitive? But if we hit on this interaction index will become one because while we have the click down, we will be a sending that with that, we have the active index. So now we need them multiplex in the multiplex. Er has basically I the number off different sources of information on. Then it has. It has the index that should have that should open the information so they index were really have it. We can connect it here on the information that we need. It's the information from the interaction. So it will be if it's clickable or not. We can connect the Sergio answered one you need toe. Make sure that you are connected in the same place. So in Pajero here, the top one interaction to even Fujito will be surveyed. Oh, the interaction to this one input one should should be short one. So now whenever we click on one interaction or the other interaction it will send on output , it will send one of the two output we can just now connected here. And let's legends from space to make it a little bit more beautiful. That's put it here on this, connected like this. So now either even if one or the other one are pressed, the animation should work. We can try it out. We can click here. It works. We can click here. It works too. There are a different way of doing this in this exact in this simple case because the value is very simple. But I wanted toe showcase you how you can say use the multiplex or with a simple example, because if i e via more complex example, the mobile multiplex or by itself. It's a little bit complex at the beginning, so it's better to start with something basic that you see how it works on. Then with the practice, you will see more I a bunch situations without being a scared off the multiplex in showed that. 19. Note on Patches: I would like to remember you that the patterns that we've seen are some of the ones that are inside or economy. But that doesn't mean that you can just use the origami patches and you can see in the patch library. There are hundreds off different patches on their even categorize in the different categories. So when the ones that we've fluke, they're all inside origami. Here you have the origami patches. But if you go to another category like, for example, image, you see all the patches that are by default with quashed composer, and that helps you process images. You will not use most of them because some of them are for creating Villiers or for manipulating images. But it's good to know, because sometimes you need to do something and you don't find what you want to do. Inside the origami category show. Take that into account on. Remember, you can use all of the patch is available in court. Composer. It just a matter off knowing what to do. I'm using them also when you're in a on a patch and you you see a patch here, you can see the information off each patch and also you have. Sometimes some knows about what can you do with it or the perimeters that the impact that it has or the Open is that it has on what needs to toe to in order to work basically. 20. Showing and hiding your keyboard when needed: one of the things that a lot of people wonder when is creating a prototype with court composer with very origami is how can you present the keyboard? So imagine that we have thes design here. I'm gonna It's called background. I'm gonna set it as just a normal layer. We're inside the the ah new a origami file. So the origami project I'm sitting this layer as a Bagram on. Imagine that we want to make these field like if it wasn't input field. So whenever the user clicks, we want to show the keyboard that something but really basic, but that you will need to do in a lot off prototypes in a lot off different compositions. So what I tried to do always is to have a keyboard image like this one. The judge Ah, keyboard that has the some key someone to complete. You can make it different depend, depending in with your layout of your country or whatever. So but I'll twist. I always tried to have these image this keyboard image in hand so I can use it across my project. So the freezing, the first thing that I'm gonna do is I'm gonna put it. Drag it the match inside off the composition. So I'm gonna move this here. Andi, I'm gonna create a macro show. I have it. Ah, all together without disturbing the other. The other a batches. I'm gonna call it macro. A keyboard macron. So what do we have now? Here? We can go inside Onda. We should change the y position because the serene others at the white position Because the initial white position will not be this one will be probably. Well, what I'm gonna do is, instead of using center, I'm gonna do bottom center and I'm gonna show didn't change bottom center. They told the Budge Inspector here, Bottom center. Now we need to position our keeper correctly in the right position show. Right now it's shown, but we want toe hide it. So which will be the height will be right now, Zito, The Y position will be the a miner's height off off the keyboard off the image show. In order to get the image information, there is a match for the match him for its imagine image image match. You might they mentions that has one input. That is the image we can complicate the revenue on then it has different output. Take into account that the ones that the the one that we want is the pixels wide and pictures hide not the other with on hate because we're working with pixels. So now we need a transition because we will be transitioning from one value to the other one. The end value will be the current value, because it will be when it's shown show in value will be Zito on the start value will be miners there. Height off the image. How can we? Because this is positive. How can we converted to negative where we can go to math? Math machine, mathematical expression? I didn't say the budget inspector. We can changed expression show. We will, though, As you see, this patch receives two input when A and B actually, I'm gonna rename it, I'm gonna say with. So we're gonna receive the with and we're gonna do minors with, and that will be the result. So I'm gonna Oh, sure. Each other with sorry. Age the height. I'm one of the miners. Height. Hi, Hate. I'm gonna call it okay, because he's the hate. So mine escape that will be the region. So we connect the height here, the pixels height story. As I said before on, the result will be the start value. I'm gonna make more room here. Okay? Gonna position everything. Greg Lynn. So we have a space on the transition. The N value will be the white position I'm gonna at the pop animation here on the value will be The number on the progress will go to the white position. So as you see now, the keyboard is he even and we want to do is when we click on field on an input field. The keyboard will appear. So in order to know when something some input is being click anger. I'm going toe shortly. I'm going toe ad a new input with impotence, Peter, I'm gonna call it and ah, that or click this input will be published outside the macro show. We just a publish it. And if we go to the parent, we're going to see that we have here. Click. So these is the struggle that will ah show or hide or keeper. So we need I was thinking Now, instead of a transition, we will need a switch because we will be screeching. Sure enough, the streets at double will be toggling between two values. So basically it's the same. The result goes into into the star volume will be the initial value on the en. Value will be zero show. That's totally fine. And the output will be through the number on Let's do we have some space here? Let's move it back on. Were right to continue. So what will be the thing that a doubles our Tuggle? What will we click? Basically? So I'm gonna connect the click here to the input and the click that it's connected outside . We toggle these and we'll do the pope animation to the Keeper. We'll see if the perp animation works for us or not. So we're gonna go to the parent Onda. We have our keyboard macro. Ready? Let's see, How can we use our macro 21. Creating a reusable keyboard patch: we have our keyboard macro here that if we go inside, we see that it has a some an image and some operations being done there. But we need toe show our keeper when the user is tapping here. So what I'm gonna do is I'm gonna create a hit area that will be on basically jail a year, but with less less input, because it it's not supposed to the sum total of some of the more A bunch things off a layer. So we have a k A hit area on a keyboard Macro on. We're gonna come pick our heating, so we're gonna change the position the white position will be, Let's see 100 that she should be where the input is. So that's the position on the we've will be bigger show. I'm going to change it manually. I'm going to see a 500. I have even more 600 seven. Okay, so that will be our heat area for the input. When we have ah hit area configured, we can remove the shit that mode because we don't need anymore, so it will be hidden. Now we're going to do is to add on interaction. We have the interaction too much. I'm we gonna connick the patch with the heat area. Remember that you can use a shortcut. You can be here on just fresh I on the interaction will appear So now that we have the interaction, we just need to toggle the down toe the click off our macro show. When the user clicks on the on the hit area, the keyboard shall appear. Let's side out. So we click on the keyboard appears we click again on the keyboard, goes back You see it's working and we have our keyboard A here Sure, I put here Gear Ward Marco My growth. We have our keeper. We can take a little with the animation because when it goes up, we see the the background So we can change the bounciness Toby like three on Did she know we still see it? Let's do chew and now it's much better. So now when the user clicks on enter email we see the keyboard appearing. That's exactly what we wanted. So we created a macron on. We can use these macro easily from everywhere you can. Even if you want, you can even click on the like the macro and hit at the library. On you will see these different things that the name cooperate and description that you can feel. And then you will have your macro as, ah, patching your library so you will be able to reuse it across all of your project. So that's good to know that something that you will need to do in a lot of your compositions and I really recommend you toe even grab these macro from from this project or create your own keyboard macro. 22. Connecting app screens to show user flows: a lot of the times I get asked the same question. Hey, idea can do a simple user flow, showing my designs with quartz composure with regard me because some of the times you have a design on give them one. Any cool animation you just want toe at one screen after the other one on. Just show the usual flow to your plane. So yes, you can. It's easy and you can do it. Let's let's see, How can we do it? I have it here as always, the origami template. I'm going. I'm going to go inside. The later group on here have three screen shirts that I took from government application. He regarding public transport in Barcelona. So the main areas that when the user clicks online on ah, the the subway lines, they go to the next screen on. Then they can click on these information Here on they will go to the third screen. That's the main 80. So just by showcased showcasing these, you can go to the client. You can say, Yeah, this is the first screen than the usual will click here on. It will go to the second, create a screen like exactly what I didn't know. Let's do it in origami. So I'm gonna drag first. The three images here show. Let's go with the 1st 1 2nd 1 on 3rd 1 So we have optional the images here. Cool. So mm. Okay, I'm gonna disable those right now. So we see the 1st 1 and we can easily work with the 1st 1 When I'm gonna do now is I'm gonna at an interaction, because the I want all the maj to be the click interaction a space not just one row, because at the end, what the what I wanna do is just show a user flow to my client. So if I whatever I would like to add different, usually flows in these in the same competition, you will need to add heat areas for each of the off the floor. But right now, what I want to do is just one usual flow. So I'm gonna ah, connect the interaction with the layer on we gonna do is we're gonna go for the double. On the initial value will be the the the with off the image, because that will be for this layer that it should be outside show. I'm gonna get the image dimensions so I don't need to care about the sizes of the image on . I'm going to connect these image. This will be just for no for all. I mean, because all of the matches have the same size. So I'm gonna put the image they mentioned here on. I'm gonna connect the pictures white into the initial value because that will be the initial value on the secondary. Value will be zero. The output will go in tow, a pop animation and the progress will go to the position. So I'm going to move things away, toe make a little bit off order here. I'm gonna move the field layer Onda, the interaction will go here on the down show. Whenever we click on this layer down, we go into the input show. We have the picture white off off the image. They mention it saying zero. But it's not right. Some off the bags of origami on. Then with the output, I'm gonna connect it into the number on. I'm gonna connect the progress in tow the exposition, so I'm gonna enable it on as you see now, it submitted 750 show. Now the image is 750 pixels away on leave. I click here it goes inside. That's exactly what we want toe to the We quickly can image on the match goes inside with a small animation I'm going to now a do the same for the second in macho I'm gonna put inside the layer I'm gonna eat I shall we have an interaction path created on I'm gonna do exactly the same. So toggle on pop animation I'm going to copy and paste them here and we need the pig cells White also connected to the to the initial value and the down connected to the input ledge enable the image on Let's connect the progress to the exposition. So now if we stop on start the viewer again we're going to see that we see the initial screen with Click on, we have the second screen and wit leak and we have the third screen really easy really fast . As I say, it's something really basic because if you want to go though things just to show your usual flow and show your designs, you don't want to spend too much time with course. Composure, if not doesn't make sense, is better. Two years, another tool that makes things simpler. But you should know that you can use the same tool to do these. Andi, with the benefit of the life images Life connection, the showcase on the phone show cation, Big screen, Andi, All that stuff So you know that basically, it's possible. 23. Sliding menu animation: this lesson. We want to see how to create the hamburger menu, that with the sidebar or sliding many appearing. So whenever you click here you have your menu on, then you can dismiss it again. So complete the menu appears and we can dismiss it. Let's go ahead. I have here the exported assets in order two years for this composition. I have the background. Then I have the side navigation on. I have the navigation bar that it's always on the top. So the first thing like I'm going to do is I'm gonna change the the device because there's 100 applications, not an iPhone. I'm gonna go inside the labour group. I am going to start as a waste importing my layers. Okay. Generally, they have all of them here. A. I'm not gonna do anything with the number. Just just study image that will be there. I'm gonna move it here on I'm going toe. I m but a position it in the correctly so And that's the bottom center. Okay, that's here on the setting up. If for some reason isn't exported correctly, well, we can exploit it again on or just for now, I'm gonna scale it twice. It's blurry, but for the for the lesson, it's certainly fine. Show A. What I want now is I want to move the side, by the way. So the side but it will be out of the screen will be in the left position. So, as you know, as you may know now we will need a struggle. So we will be toggling between two values. We will have initial value and then we will go to a second value. The initial value will be that's that will be the exposition show. Initial value will be Oh, I forgot the minus miners on more like 500. Perhaps more minor. 700? Yeah. Initial value will be minor. 700 On the end, value will be probably Ah, my nurse 100 would be miners 80 minor, 60 Probably surely 40. Yes, minus 40. So the secondary value will be minus 40. So now we can connect the output of the Tuggle to the exposition on as we see it goes away . Sorry. I forgot. If we connected directly what will happen that the value will change abruptly so we will not see an animation. I want to add a pop animation so that the animation goes without changing abrupt. So I'm gonna connect the up output to the number on the progress to the exposition show. Now it's smooth whether we need now we need two things. The 1st 1 is we need ah hit area while on interaction of the hit area. Oh, yeah? Well, it depends If you want to make remember the whole layer clickable, then you need the hit area. You can just do an interaction on connect the interaction with the layer, But if you want toe, just make this clickable than you need a hit area show. Let's do it there with more interesting with a hit layer, we have the set of mode so we see where we are. I'm gonna position it in the instead of the center. It will be top left and then we just need toe move it a little bit down on right. It's always these is not working. Minus okay. So whenever the user clicks on the button, the side nap navigation will appear. We can remove the set up mode for the hit area. I'm gonna move away the field layer on a we need now. Yes, on indirection show. I'm gonna the interaction. I'm gonna put it here. I'm gonna connect the interaction with the hit areas so the interaction just works with the heat area. So what should happen? Well, that's quite easy. When the hit areas click, we should just struggle the input. We can just try. We click on. We see that the navigation appears. Ah, what is that we need? We need to also at Ash. Um, a black layer here toe. Make these as we had in the design. I'm gonna show these saying here, so if you haven't seen it as you see, there is a black lawyer here, so let's go back to crash Composure on. Let's create annually a year. I'm gonna remove these layer from here because we will not do anything with it on just for a black layer. We can just I really create one one year here on. Then we can make it with will be the We can get the image dimensions with that image here. So we have the white for the weeks on the height for the heat. Okay, we have color white. So we don't want Dwight. We want black color and then we want the A position will be below this side Now said now these three. So this will be three onside now will become for sure not we have. I'm gonna move these here. Onda the nap bar. I'm gonna move it away tohave earlier. Be more organized. Okay. So Ah, yeah. What's the next step right now we can see that we can click and this comes here, so that's perfect. We need to modify the opacity Capacity will be zero the three. Yes, Marla 03 We can actually check the design to see which is the correct capacity. It's 50% show It's the five. And what we need to do now is we need again. Ah Tuggle Onda on animation can be classic animation. Would you even it can be we can use instead of double. We can use the transition, but we can use Ah classic animation. Better. Yes. So we have I'm gonna move these here. I need more space. Okay. I have this here. I have another Tuggle here that will go from zero initial value will be zero. Yes, that's the opacity on the N value will be geo that five. I'm gonna use our linear the court for the animation on. Then we just connect the number, connect the process to the pass a team on connect the down from the interaction to So the let's have a look, So I'm gonna restart. Might be worth now it's not visible. I click here on these is visible So if I click again, the animation will be real reverted. So basically that with what we wanted for our sidebar menu, we see that is working fine. You can even see the value skier I changing. So that's what we wanted for our hamburger menu. 24. Presenting the content to the user with an animation: That's what we want to do in this lesson. So when you run the up the squares well appear again. So I'm gonna it started again. Go full screen and you see, after five seconds of Dealey, the Abwehr show us from information that's probably can be used for ah, splash screen for loading a screen When there is something loathing and you want appear make the content appear RWE's Let's go inside the layer group I and I'm gonna change as I'm not going to use any image, I'm going to change the field layer color to something more beautiful number. Okay, so we have these blue books blue background story, and I'm going to create three different layers that will be the boxes that will Up here, you have the color white, and they will have the with same with them seem height. The only difference will be the ah, final position, the final Y position. So as the within the hide will be the same, I'm gonna add some input splitters that our for our four different propose. What can be said can be used toe. Specify Ah, static value. I'm gonna see height on, then I'm gonna Akopian paste on with And then the with will be what we need to change. I'm gonna delete and then goto with But Inspector, this will be type number because we want to store a number on the store. Number will be for the with will be 500 Now we can copy and paste for the height on for the Hyde will be 300. Let's see. So I'm gonna connect here and connect here. Okay? Now we can modify the Hyde will be, Yeah, the Heidi's okay. And the winner will be more like this or leave it. Okay, so I'm gonna create two more layers. One one, and then I'm going to do the same. I'm gonna connect the with. I'm the height. So we have all of them here. The initial position will be down. This Pinchot we don't gonna do ah Dele. So when we start the application, the ah, the animation will start with a small delay. Let's say two seconds and then the it will duggal the the initialization so we'll have a transition. That it will go from Zito will no be Zito. The initial position for the 1st 1 will be my nurse. 500 not manage 500. Okay, okay. The initial position for the 1st 1 we we 400 show start value will be Ah, no sure. N value will be 400 on the initial position. Will be now. Yes, my nurse. 700. I love you even more so. My nose 900. So we have a really And we have the transition here. And once we have the value, we can add a pop animation of the pope. Animation here, with the value on the number on the protests, will be in the white position. So I'm going to stop. Stop the animation, Run it again. Oh, free. I need toe. Ah, Say the value that we want to basho the value that we want to battle will be in an import split their or show because it will be always the same. I'm Neither will be one. So will be number. Um, one start value on we connect the star value with feeling. And if you've seen after two seconds the animation is that I'm going to stop the enemy the viewer on right again on after 22 seconds. That square appears The next thing that we need to do now is we need to add more poppin Imation's for the other ones because the other ones will appear after the 1st 1 So again, and whether we can do is after we need to wait for the 1st 1 way we can say OK, get the progress off the first layer and use it as an input and then you see as the other one or support for the for the other layer the same for the third layer. We're gonna say years the progress off these input unusual as the position so it will slowly bounds with the spring animation equal slowly bounds the other animations, whether we need now well, instead off connecting directly because if we connect dialect directly, they will go the same position. We need to do some math, so we need basically toe ah shoots toe at a value to the actual progress so we can connect here. I think it's that or troops will see on. We can connect to the white position. So let's see. Let's though, for example, Ah, let's at, for example, 300 and we'll see if we should add Also, I think we are really good. The answer. We should trips track. Okay, so we should Shoop. Shoop struck 300 A little bit more will be, ah for hundreds unseen for this one, but the double the amount. So let's play now and as you see the cards up here in the right order. So after a small daily, the cards appear with the information that what we wanted and as you see, it's not so complicated. 25. Application parallax effect: This is what we will be building in these lesson a little nice, parallax with these a effect that when the usual try to scroll down the image growth, the parallax on the effects, something simple but something really, really appealing. I have two images here. One is the background image on the other One is the content that comes already with a chance French peso with a need toe play with ah, those settings in then, ah, or you got me. So the first thing, as always, is going and said the layer group and importing I'm gonna make some mates from space importing the the asset one is the background on the other one is the content that goes on top of the background. So now I'm gonna start by having the scroll. So we need the scroll. Um, as we know, we should connect the scroll with the layer and then it will be scalable on the image will be connected to the image off this girl and women with here. So we have a little bit more office space. Also, the white position should be with the Y position off the score. So we have it here. Schooling. That's pretty easy to has. Also, previously in another lesson. So now comes the a hot base her Harper, when we want to make these layer. Ah, to be parallax. So basically, we need to know they're offset off this crawling position. How can we know the offset of this calling position? Well, if we know the white position on we know the initial white position that it's minus 1016. We just need to show strike that value from the coroner position on. We can get the off shit show. I'm gonna go toe math. Gonna add a math patch that move these to the site. Andi, these math butts patch is going toe a at to the value because it's miners value on. It's gonna add the 1016. That's the initial show. 1000 16 on the first input will receive the core in value. So we have the current value as an input on. We're having the the the initial that it's felt Miners 1016. So with that, we going to get the officer, we can try. We can put that into why position and we see that right now. It zero but If we move, we're moving the offset. So the image is moving with our with the scrolling off the other image. Okay, show what we want to do now is we want to add a little delay to in order to create a parallax in order to do that is as easy as having another masks crecion and dividing the value by another value. Depending on the value that we use here, it's gonna add more or less parallax. So I'm going to start with one. That five. I'm going to see what happened. Show the output the office shit out from here. He's going to come here on the ah final value. It's gonna come to the white position. So as you can see now, it's already doing a little bit of Parallax. I I will let a little bit more so. Which more prominent I'm going to say to for example Let's see. Okay, now the parallax, he's much better that we see now There is ah these effects. I don't want these effect to happen because when the user scrolls down either one the in match toe move with with the content show we can show that pretty fast. We cannot Ah, a max value that will get the max value that it has will be either the position, for example, 121. That is the position right now or engaged. That is a negative value. That is the value that it's making the image go down. I don't want toe get that value. Want to discard that value. And I want to use Geo. That's my lowest value possible. So I'm gonna have 10 of expression. I'm gonna copy these one coping based, but instead off a dividing I'm gonna use the Mac's function on the max will be either the perimeter that that comes inside or Jiro. Even the fears the first input or zero on the old put will be the white position so straight out as you see now with Zito because it's sending a lower value, sending a negative value, so it's getting zero. But if I go up, the other value comes in place. So we remove that problem. What is that we need? A. What we want to do now is when the user scrolls down that the image grows that the match skills up to create these visually nice. If it okay, How can we do that again? We will need a couple off things to do to show maths here. So the first thing that we will need we have here the offset. So I'm gonna play a little bit with the offset. But the offset comes with big value, so I'm gonna have toe lower it down by dividing. So I'm gonna add another math a batch? I'm gonna move thes up. Okay? Here. So I'm gonna divide the value. It's a really divide by 100 for example, etc. On the input value will be these value. So now I'm going to get the the the out value, and I'm going to see just to see what being out here. So we have a zero and we have this scale. So it's going the other way around. As you see when it's going up, it's a scaling bigger and we want to scale bigger when it's going down. So we need toe. Just divide instead off hundreds and hundreds. Too much because you're throwing ah, lot. I'm gonna do I know that straight with 200 its miners miners 200. So now let's try as you see when we grab and we go down the image scales. That's exactly whether we want what's happening now that the value of the initial value it Zito show because the initial after the jato on we don't want that to happen. So again we will be using a Max. I'm going to copy these one because we want that the max value to be, ah zero. While no Nigeria, the initial value actually should be one. So we can do is we can just at at one to the import. So I'm gonna connect the input here. I'm gonna at one. So we're sure that we will always have at least one. You know, we have one on hooks. We still have these issue. We we just We have these working now correctly. I still don't like it so much. The value I'm gonna say, Let's right. 500 minus 500. Cool. That's much better. So now we have ah one. But when we go up, the value goes down so the scales goes down. So now is when the max comes in hand show the important will be they import the open will go here on the max value will be zero. That's the default max value. So either the number that comes here will be if it's bigger than zero will be used. If it's led lower than zero, Geo will be used. We can train now and we see that it's not scaling. Andi, that is doing these nice effect that we have scrolling with the Parallax on a little nicer fake and you see there is some math involved, but not not to match something basic and yet. 26. Creating a lightbox exercise explanation: Now it's time to get your challenge. So my proposal for this challenge is that a let's create a light books so you can use my assets that you can. You will be able to download in the research section, or you can use your own. But the basic idea is that there should be image gallery on when you click on an image just church one images and it all of the images. So when you click on an image for Excellency, for example, this one, the image will be well, will open so it will open, the background will fade. We have here with, ah, black opacity, and we'll see the image in a big screen size. So then the other step is that when you click on the image, the image Willie's appeared on the background, the Bagram black that we had before will fade away. So that's the exercise. Tried to do it on then, even if you don't manage to do it just or if you don't know how to start, just try it. Try to the as much as you can and then follow to the next lesson where you we will see the step by step. How we can rip reviews these effects. So go ahead. It's your turn now and good luck. 27. Creating a lightbox solution: Let's see the solution. I always remember that there are different ways to do things. So if you did it in a different way, that I will go doesn't mean that yours is not correct at the end. If it works, that's perfect. Especially with those cases with Scare story with quest composure with origami that your main proposed is to show Do your clients or developers or whoever it is the interaction. So it doesn't really matter how you David. Let's go. Let's go inside the layer group on. As always as I said, we can import the asset. We have the background ass it on. We have the photo asset. Let's put some organization here, Andi. Right now let's hide the photo because we don't want to do anything with it right now. Let's move the film layer on. We have to add on interaction here. Remember, you can have a full interaction to the image, or you can at ah, hit target. I'm gonna hit target show all hit area. Story show only. These area is clickable. I'm in set up mode, so I see the square on. I'm gonna position need currently, I'm going to say that the anchor point is center left, so I don't need toe Modify the exposition on the white point. It's 300. Let's play with it. Really? Read 218? Yeah, not Turkey on. Then it would be 200. And to me that we need to change. Okay, so we have our heat area here that we can remove from the set up mode. I know. Well, what I want to do is I want to put it below the image layer. So this is the second position, and I put that in the third position. Okay? Now we need the interaction actual waist. We have a human interaction to, and we're gonna connect the interaction with the heat area. What's gonna do the interaction? Well, it's gonna go two things. First, it's It will make the photo appear from here on it. It will also made the make the the background appeared. The blood background appear. We don't have it. So we need to create a layer. The color of the layer will be black. And with on the height will be the full full a size. We can write it or we can, just as I always do get the image dimensions on. We think that the much dimensions from these image I'm gonna put it here on this layer. I'm gonna move it down here, so I'm gonna right now. I'm gonna move the photo outside. We have here the size so we can connect it. The pictures weight with the with on the pieces height with hate with a high charring. We have said now the passage of the mission capacity will be zero. So we're gonna have ah, transition. The initial value will be zero on the end. Value will be generated. Five because we don't want it with full capacity so we can connect. Well, I'm gonna go on animation this time will be a classic animation. I don't want the pope animation. I just want the linear animation. Um, these will be the progress off the off The opacity on the transition will se which will be the end value. So what? What we need to do now is we need to ah, connect. So we need the double and we need to connect the output of the Tuggle with the progress. Also, we need to connect the interaction with the Tuggle Leisure Always. And now we should have the capacity for these. I'm gonna lower down the duration. 20 the to I'm trying it again. Okay, here we have it. We're ready to do now is to money manipulate the photo. I'm gonna enable the picture again. Andi, I'm gonna put it over the unlikely year. Ah, I'm gonna see that. The that. The anchor point is stop left. Three. Center left on the scale. Initial scale will be 05 less. You know the truth. A little bit more, Geo. Those three. Okay, perhaps. Are you 25? Perfect, then? Also, the exposition will change for everything that needs to change. We need the transition. So let's start having transitions with the transition that will go the scale from Joe the 25 to 1. We're gonna run in tow scale, and then we need another transition. That will be the ah, what do we need? Which is the other transition that we need of the position? We re y position. Why? Position tradition Show the the this the Y position, the initial position. While the imposition we know for sure will be zero on the initial position. will be. That seems 200. Well, we're really having more or less when the hit area 220. Yes, show the start value will be 200 plenty. And then again, we need on an emission here. I'm gonna do again. I classic animation so we can connect the you can use classic animation. Or you can use the pope animation. I'm just using plastic because I have a here show took opium based. I'm gonna put the connect the value here on the progress in the Y position on the same here . So yeah, I need the animation on the progress in this game. And then we can use the same toggle because at the end, it will be everything the same. All of them will be total by by the same. And now we can restart our these. Let's see, we click on it. Oops. We need to go where? I forgot something. We need toe because now it's here. So the hit button we put we we've put the hit area below the image. So we their height this image and show it when? When we click on it or enable we went with Likoni or we either move the hit area in the top . I'm gonna I'm gonna do that. So I'm gonna a hive it on, then show it. So with the simple condition, the initial will be zero on the end will be one show by by the fault is not enabled. Andi, when we totally it's enable Let's try, we click on it appears Let's run it again with flick books What happens now? The animation is not working. 28. Lightbox solution, dismiss the lightbox: what? I'm gonna go Instead of working off using the enable disable, I'm gonna play with the opacity show. Just treating from enable disable toe opacity because seems to be a prone that when enabling the layer the animation is not Ron. So just race between the tradition. I'm gonna also move thes so it's clear and the simple dish here on these here. So just by moving from enabled toe capacity now it works. Okay, we have the first step done. Second step will be when we click on the on the image the match goes down on the background Fates. So I mean we knew run anything in direction and these interaction, we reconnected with the image layer. So whenever we click on the image, the image will go down again. We need the transition that will be there and go away Transition. The initial value will be zero like we have now, but the end value will be Ah, let's see. I'm gonna disconnect this for a second. The n value will be minor. Sh 400 more. Let's say miners even more than 1000 OK, minus 1000 miners 1100. Okay, so initial value will be zero on the end value will be and 1 101,000 Then we need a double that will be troubled by the interaction. And we need to connect the interaction down a click toe the input, as always, on the output to the progression. Okay, Now we have ah, challenge. What? What? What should we do? Because we another challenge. A problem. What should we do? Because we want to connect the progress off this one here. But we also want to connect the progress off. This one here on an input can only have one, I hope, with output at the time. So how can we do it here? We need what we call the multiplex Scher toe. Multiply a different input on combined them toe one. Just one input. So I'm gonna make some space here because we need some more patches on. Then I'm going to remove these. By the way, I forgot the animation. I'm gonna add it now. It will be. This time will be a proper animation. Just here on the value will go to the number. Okay. So we need the multiplex, sir, that I would put here on. We need the index in the Creech. So basically, the the index reached that has three inputs within the three. We just need to I don't know if we Yeah, we can change the number of imports the index treats has different in book input on when something changes in an input it out puts the index that change. With the index that change, we can use the multiplex Scher because the the multiplex receive different perimeters. In that case, too. Perimeter two sources receive the receives. Different values on output on the output port, the value off the short index show. Imagine that we have, for example, here we have a 10 on here. We have a 12. If we say zero, the open will be 10. If we say won the open, will we? 12. Okay, so then we need to connect the animation progress as a sore zito. An animation progress as ah in in Pajero in the index rich. So I'm gonna do a little bit more space, which clear? I'm gonna move these on at the same time. I'm gonna move these so the layers are all together here. So now I'm I should do the same with the progress off the off the going away transition. I should connect it to the input one. And I should connect toe the multiplex er so we have the shores of information. Now we can connect the index to the Surge Index on the output off the multiplex Scher to the Y position. Sure. Now we're combining two values that can be. We're combining them into one value, and that will be the value that will be a plight. Let us stop the animation. Let's run it again on Let's see what happens. So we click here, the image appears on. We click again on the image goes down If we see we're still missing one piece, we're missing the opacity, the opacity of the off the off the black light books. It should go back to one. So what we're gonna do is we're gonna reverse that transition that it's already done. How can we do that? Well, first we need another Tuggle because this struggle is doing a lot of things and we don't want to river everything so we can connect the this here on these here so these would be responsible for these stubble and we can move all of the's here. And then we will need Let's see Obviously works. Yes, it stop on run again. Okay. And now we will need another multiplex here because we want to be ableto a total The stubble with both interaction. Show with that indirection on with the other interaction. So I'm gonna photo index switch on multiplex, sir. So we have We will have different. It's make some room here. We're gonna move that here. This here the output will be the input here. And then we will have this source here. These other source um, this just needs to input. And these goes here in fujito input One on the index will be the short index This straight out show Need to stop and run. Let's click it Woes It works on when we click again It goes back running again So click one appear The image we chew The match goes away on the opacity goes out So that when we wanted the light books 29. Course overview and thank you: Congratulations. You made it. You made it until the end. You made all of the course. You followed all the lessons. That's really, really, really nice. You should now be at the starting point off. Origami off course compulsion. If you haven't touched it before yet. So my suggestion now is that no, that you have the basics. You start with some legal challenges that you can have at your work or on your free time on your start Small trying to the different things, applying what you've seen through the course. I would like to thank you a again. Thank you very much for listening my courses on. I would like to remember that if you are really interested in course, composer in using quest composure and you want toe research more and know more about the tool on about other different libraries, not only origami, they're more other different libraries. I have another curse that will Did you all that you need to know regarding the other libraries on regarding a lot off patches that are included in course composure. You can ask me for more information without any problem. Also. Ah, as I said, thank you. Thank you for for listening me. I'm open for any questions that you that you make up. You can contact me directly via private. Ah, message. You can send me a message you can post also on the course board so all the other students can benefit from from your Dobbs on DMA help. Or I just said you're going to see me. A private message. Also. Last but not least, I would like to say that if you really like the course, we've been as if you could at the review on the course. So that really helps as instructors to get new Strother students and to grow up the community off a origami people that at the end it will be best for all of us. So thank you very much again. Enjoy it, Andi. Again, I'm open for suggestions for help for Dobbs are or for whatever you need. Thank you.