Use Keynote to Create a Scroll-Based Parallax Animation

today I want to show you a really cool trick I use for mocking up websites or mobile app designs for this trick I use keynote keynote is a great tool for mocking up different states overflow it has an animation preset called magic move which is really useful with magic move you can create different states over the sign and then keynote will create animations between those states like magic today I'm going to show you how to use magic move and keynote to mock up a parallax effect on our website just a disclaimer this is not a prototype since you cannot really interact with it this works more as a presentation so that's it let's get started let's start with a basic example so we can understand how we can use magic move on keynote so I have here a demo of two screens one where it has a title a text and then one where it has different elements so if we have a text field and then we have an iPad and an iPhone so three elements here and now we want to animate them and we want to mock up an animation when you scroll a scroll based animation so let's first to the slides we're going to apply magic move so we'll select them and then we go to animate and then we add an effect and we select magic move and then we can change the duration here probably around one second should be good you can play around with it and then here on the options you want to say by object and fade unmatch objects so here if I press play then I press and then it appears it's just like facing fades out so there's nothing really magically moving because the elements that are here are not also here the magic move of magic move makes when an element is in both places then it creates a transition between them so it creates from that it's here on the corner and then the different state in a different slide it's over here then you created us that transition between those two so let's actually do that until you that I'm actually going to copy these elements going to copy them and I'm going to go back to my first one and I'm going to paste them by pasting them now I can move them in and say what is the starting state of these elements so I'm going to zoom out and I'm going to put them outside I put them outside now if I press play now it will create that scrolling animation but if we wanted to be parallax then all we have to do is just change the Y position of this elements so for example these two I'm going to actually drag them a little bit more and this one even a little bit more that way it will create an effect of each element it appears like it's in a different speed or it's in a different depth so let's actually preview this let's press play and I creates that really subtle effect of like some of the elements are a little bit slower or appear that are a little bit closer we can actually zoom out go back and if we want it to be less subtle then all we have to do is just like move them in the Y position even more further furthermore and if we want to make the iPhone to look appear a little bit closer then we have to make it look super fast into it and to achieve that we actually just have to move it way way far down in the Y position so let's press play again and there you go so now we have it's not as subtle as before it's a little bit more obvious that when you scroll that happens something else that is going on is that the first text which was scroll based animations this one it's just fading out so you see it just fades out and then the other elements appear so we actually wanted to be also look like it's a strolling right so we have to go back here copy this and do the same but in the opposite direction so this one actually goes out of the screen so this is my starting point and here I'm actually editing the exit of the exit state of this element so now if we press play oops sorry let's go back to the first slide press play sorry I have to select the first night and then press play and then there you go now it looks like it's scrolling because that element is also exiting the screen and the other elements are entering the screen so that's pretty much it that's you can apply this same principle to all your elements in your website now we're going to go through through a demo of an actual website that I was working on it was a mock up of a website and we're working on carbon health at my startup and I'm going to show you how I accomplished one of the mock-ups it wasn't the final version of it but it's it's a good starting it was a good starting point to get us to understand how we wanted all those scroll based animations to look like so the first thing that I'm going to do is transfer my sketch file I'm going to go back here this is the sketch file and I'm going to just copy and paste every element into keynote and the cool thing is that I can just select any of these elements even if it's an image let me just turn off this even if it is an image I can just let me create a new slide here just paste it and keynote is really good just like putting this as a PNG now it's an image it even copies the shadow everything as long as you copy the individual elements that you want to animate then keynote will do a really good job of just putting them here I can just for example all this paste it and now I have this this text pasted copy it and paste them in it and I still have to arrange hit here on keynote I wish there was a plug-in that actually just exported everything through keynote probably in different slides or something but at the end you I don't know it's a little bit of work it's just copying and pasting and rearranging them again this is just a mock-up that gives you just an idea of how your animations can look so it doesn't have to be perfect something that I forgot to tell you is that um keynote you want your let's create a new file when you're preparing your file I'm going to select the default white on the white version going to choose it and then here you can actually change the size of your artboard your document here you go to the slide size and then here it has a default size I don't really know what the size is but you can go to custom slide size and well apparently it's 1924 mine I'm actually going to change it to 1640 by eighteen by 960 or yeah 960 whatever your design you wanted to look like you just change it here and then now you're ready to copy/paste your elements from sketch okay let's just Pete up this [Music] okay so now I finished copying and pasting everything from sketch into keynote by the way the sketch file is also available for download on a link below so just click on the link and you'll get this if you want to follow along also the keynote file is there if you want to see the finished product so we have here or elements everything is here from the sketch file just made one slide pair section so the first section which is the hero is one slide this section is like the second section on the website is another slide and so on so over here you're going to see each slide is one of the sections and usually websites will have stuff like that where it's like a block a section where is talking about something so if you want to mock up your website using keynote you want to think in that way so okay so we have all of this now we want to apply magic move to all of your slides so I select all of us slides and I'm going to apply animate add an effect and I'm going to select magic move and I'm going to keep it around 1 125 and that's it ease in and ease out that's great and then on transition you can also set it automatically if you just wanted to move automatically with a delay but for us let's just put it in click so we can actually control it so we have that everything is set and that's it so now if I press play it was just saying fade-out between the screens because nothing is repeated so there's no really magic move happening it's just fading in all the elements so to actually make the magic move happen then we have to actually copy and paste all the elements from each slide into the next one and the previous one and so on so for example let's actually say how these elements are going to animate when scroll out so I'm going to copy them and then I'm going to go to my next slide and I'm going to paste them and now there I'm here I'm just going to zoom out a little bit and then I'm going to move them out there you go move them out I'm going to put them to the back that way they are behind these elements there you go around there so something that you will notice is that I also put a white background this element on top of my elements of these these little guys because I want to create an animation on top of them and instead of masking them I just put that overlay of white where and now I can move the elements and not fear that suddenly they will appear somewhere this is just going to block its movements it from view so over here now to create the parallax effect all I have to do is change the Y position so it's a little bit a little bit slower than everything else so I'm actually going to move them like this and then if you want to Pete to make make it appear like the what I call it the iPhone in the middle it's actually appears a little bit closer to you then you actually move it a little bit more like this that way it looks like it didn't move as much that it was a little bit for like it was further away actually so and these ones I can actually even rotate them if I wanted to I'm going to rotate them just so it looks like it's rotating I'm going to rotate them just a little bit 3 degrees for the degrees in one side and then negative 4 degrees on the other side there you go and now let's press play and see the magic happening oops I have to go through the previous slide and then press play ok let's see how it happens and there you go it was pretty simple but it works you can just like fine-tune every little detail if you want to for example I can I'm going to say that probably these elements move no you know I actually like that this one is a little bit faster so I'm going to actually put it that even like it's on top of the elements and these probably they're further away so I'm going to make them to look let the move a little bit slower so if we press play I think now now it does that all these is something that you can also recreate another animation tools like principal or Flint oh but here it's just to make it really quickly and and just like using keynote like to make a movie super quickly just another way of doing this so now I have to do I have to actually copy these elements and put them in the previous screen so I can animate how they're going to get in the screen so I'm going to copy these when to go to my previous screen and then move them outside now that they are outside I can change the Y position of them just like that going to make this one move a little bit faster because it's probably a little bit closer to use I'm going to make it a little bit faster just like that way way faster and now let's press play and see how it animates there you go that's pretty cool right that that's why it's called magic move because it just connects the elements that are repeated and just creates a transition between them so I'm going to do this copy go to go to the next one paste and it just move it outside and then I'm going to move it at different speeds at different rates so this one the one that is closer to you moves a little bit faster so it's obviously a little bit further away to zoom out by the way you pinch and zoom and you use pinch gesture to zoom in and zoom out that's what I'm doing to zoom in and zoom out okay so that is there and now I want to actually copy these elements and see how they enter the screen so I'm going to paste them here and this is going to be pretty fun because it's three elements it's three cards so I can say that probably these elements are a little bit closer to you so they have to move a little bit faster right so I'm going to move them even further away just like that so now let's press play and test this so the elements exit the screen and then these elements just enter the screen something that happened here is that the background just faded in so what a hack what I can do is also copy the background and make it look like it's moving with the background so I copy it here I paste it over here and then I put it just behind everything I'm going to move it to the back and now the background should also move instead of just feeding in if you like fading in you can do that too there you go so now the element the background just moved in okay so now I'm going to just fast forward everything so you don't have to see this it's just the same principle copy/paste from one place to another and just move the elements in the Y position and then creates this parallax effect and then I'm going to stop it to see the final effect okay okay so now I'm ready I copied and pasted it everything from the sketch file and I also copied and pasted it from the different slides to mimic how the elements are going to exit and enter the screen so if you see here I see the elements here are here have the previous slide and the next slide here have the previous slide and the next slide here and the same here and the same here so let's press play and see it so you just go really nice parallax effect the next slide all the cards appear at different speeds and then they exit at different speeds the iPad and the iPhone and the text they all have different speeds it looks like it has like different depths some of the elements appear closer to you and then at the end just the CTA it looks like the CTA I didn't copy and paste it the actual element so apparently have to copy this background pace it here and then put it all the way to the top and then send it to the back and now instead of the background fading out it should move there you go so that's it it's really simple it's a it's it's great for small things I wouldn't create a really complex thing with this I mean for that I will probably invest my time on an actual prototype this is again this is just when you want to put something quickly together and just want to show your teammates or anyone just like how something could look like a scroll based animation could look and you can use the same principle bat magic move not just for parallax effects but you can also say like four different states of a button of elements that appear that appear from the right or from the left or whatever whatever you want just using magic move will create that animation for you oh sorry I forgot something else that I didn't tell you is if you can also export this as a movie so you can go to file and then export to QuickTime and then you can say you can say 1080 p or 720 whatever the resolution you want you can also use use custom and then you can say what is the after each transition how many seconds you wanted to wait and then it will make the video with that so we usually do like two seconds after each slide and then you can also build I usually set at 0 seconds so it just goes fast and that's it in self playing yeah because it's a video right and then you just export it and then export this as a video so that's a nice trick when you just want to share your prototype with someone else your mock-up with someone else so that's it I hope you find this useful keynote is free so that's actually pretty good too you don't have to buy anything else for this that's it thank you so much have a good one

Channel: Sketch Together

Views: 253,181

Keywords: ui design, ux design, user experience, tutorial, walk-through, how-to, graphic design, user interface, keynote, prototype, scroll animation, mockup

Id: 7Fu5U-z4AcQ

Length: 18min 47sec (1127 seconds)

Published: Sat Sep 16 2017