Motion.Page Infinite Animations

hey this is steve from mission bell communications i'm going to do another video on motion.page we're going to continue on from some of the stuff we were doing before but this is going to go a little more in depth a little more complicated and i'd like to start out by thanking mike supa who i got this idea from him on the video that he did not too long ago so i've got the home page of the site open and we're looking at this section which i'm going to be working on i'm going to go into the dashboard here and launch motion.page all right i'm going to create a new timeline and i'm going to scroll down to here now what i'm going to do i'm thinking three things i'm going to have this phone moving i'm going to now it's going to be moving both up and down and left and right in a loop but the up and down motion and the side to side motion will be timed differently so you end up with like a random motion i'll do the same thing to this phone right here and then i'm thinking i might actually uh also move the background a little bit uh on this section so let's see what that looks like so i'm going to start out by um adding a well we've got an animation right here in the timeline and i'm going to select this image all right and there's the id for the image that's fine and i'm going to do a translate x of about two percent doesn't need to be anything crazy okay two percent yeah you know what sorry let's go take that one up to about five percent because there's not a lot of width there so all right i'm and then i'm going to add another animation and i'm going to drag that one back here so it happens at the same time and i'm going to select this same image but rather than taking the image itself i'm just going to take the div that it's inside of and i am going to say translate and we'll go with y and we'll go with about two percent it's got a lot more height so that two percent will be a lot more movement so you can see here it's moving up and down and left and right it's just going diagonally right now we will do a repeat but i'm going to do that afterwards okay so then the next thing we're going to do we're going to add a new animation we'll start that one at the same time here and our selector is going to be this guy and we'll say it's this image and we're going to uh well it's good we're gonna do a slightly more movement because it's closer so we'll bump it up just a little bit so we would translate uh x we were uh were we two percent or no we were what were we i'm gonna have to go look uh we were five percent so i'm gonna do like maybe seven percent and our y before was two percent so we'll just do like a three percent on the y so again we're going to add an animation we're gonna start it at the same time we're gonna pick the image and then pick the parent div and translate y of three percent okay now what we can do is we can change the length of these time timings to be pretty much random so i'm going to say like this is going to be like here this one's here here and here so these are all they're all moving but sort of independently of each other and you know what actually um for this one for this one here i this one has we don't need that three on there uh i'm actually going to start this one in the opposite direction um so that y let's go negative three okay yeah there we go so they don't look like they're moving to fully together so that'll that'll work okay and then we also want to add one more animation and i'm going to drag this up so i can see a little more of my timeline here and we're going to pick for the selector this whole section let's see so that's this section right here and we've got this background position so maybe i will put like a two percent shift on the background maybe a one percent shift on the y and we'll have that go over a few seconds as well so the background is just going to move slightly as well okay so we have ourselves a little bit of movement i think i'm going to bump this up let's see if we go to like five percent if that looks like two over the top i'm not really seeing it yet and that might be because there's already a parallax you know what i think that might be because there's already a parallax on that so maybe that background is a waste of my time for now um okay so let's just we'll get rid of that we can just delete that animation and we'll be fine with what we got now uh when we come here to repeat we want to have the repeat be set to -1 and we want to enable yoyo which will cause it to repeat in reverse and then repeat forward but if we look at that we'll see i'm going to add the same repeat here repeat -1 enable yoyo and if we watch it it's not going to be quite right it's going to have kind of a bounce to it you can see it kind of almost like it's bouncing off of that the constraints of um you know the end of the movement so our default easing is not good we want to go to to sign easing but even that is just sign out so what we really want is a custom ease and we can put in here ease and then sign dot in in out all right and we'll then we'll do the same thing here custom ease sign in out and then if we come back here and push play this is moving around here and it's going to uh move around pretty randomly and then we're going to take this guy here and we're going to add this same repeat minus one enable yoyo custom ease sign in out and then here repeat minus one ease sign in out okay so now we reset this and we watch it so we can have these sort of moving around a little bit and that gives us a little bit of interest here all right well um i hope you find that helpful

Channel: Steve Law

Views: 129

Keywords:

Id: -ZaB8UdI-A8

Length: 9min 45sec (585 seconds)

Published: Sat Dec 04 2021