‫Hey, there.
‫Welcome back.
‫You are still playing with our infinite loop.
‫Now it's good time for me to watch this one and start on things from the basics.
‫I mean, but then now we have been working with this small example where we just took a container and
‫start moving things, but now it's got time for us to play with certain other examples.
‫Maybe transform our element, maybe move it from here to there and do certain other stuff.
‫Now, let me try to pick this whole content and be it on the bottom so you can utilize gaydar, but
‫we are not going to use it.
‫And if I get back here.
‫So we have this whole square.
‫So first thing is, I'm going to remove all the properties from this container, OK, and I'm going
‫to create three giant.
‫So we are going to play with three different elements.
‫I'm going to call this as I done one.
‫And then there will be an item which will be an item two.
‫And then there will be third item, which will be item three.
‫So basically, what we are trying to do is we are going to try three loaders.
‫So if you look at this example, we want to try and build something similar.
‫OK.
‫So I get back here now.
‫I have this whole move thing and I have this container.
‫I'm not going to check.
‫Let me say item one.
‫I'm going to define this item as well, it may be for the Pixel.
‫As well as high profile pics of seeing this one, nothing happens because we need to add a background
‫color to like this one and then change.
‫We have this item now, what I want is I want this to move from top to bottom and keep on falling on,
‫I should say, let me add a position as absolute and for now, let me give it a a more zero Brexit.
‫OK, so we have at the bottom.
‫So now I want this item to jump.
‫It may also give some space on the left here and say left basically 200 pixels.
‫Save this one.
‫OK, this is great.
‫I want this item to jump from top and keep on following by changing it to it continuously.
‫So the first thing I'm going to do is remove this left from here and at every different part, I'm going
‫to update its width as well as its position.
‫So the first thing I'm going to do is add zero r bottom as zero pixels create.
‫Nothing happened and we haven't added animation.
‫Don't worry.
‫The second thing is I'm going to take maybe 20 percent.
‫And said bottom, as Grundy makes said.
‫On I should be the 215.
‫Let's take this has 25 percent things will be easier on lipstick, this has 25 itself.
‫And let me add a 450 as well as do or 75, so I'm 50.
‫It will be 50 and at 75.
‫This will be 75 and a hundred, this will be handled so we can do something similar here.
‫OK?
‫Nothing happens because we haven't dated any type of animation, so let's say animation name.
‫And I'm going to call this as more.
‫And the second thing I'm going to take is animation duration, sir.
‫And let's take one second.
‫Save this one.
‫You can see this is moving in.
‫But let me try to add something else.
‫Let me call this as animation timing function like we use linear.
‫Save this one.
‫OK.
‫This was a smoother move.
‫But let me give you some lessons.
‫Let me take this as 100.
‫This is going to be 200.
‫This is going to be 300 and this is going to be 400.
‫Save this one.
‫OK, now this is moving, but it's not alternate.
‫What we can do is we can add our direction, animation, direction.
‫Remember, these things alternate since we are only doing one loop.
‫So that's a problem that we try to use infinite remember iteration count.
‫So animation, I need to work with iteration calling.
‫OK, save this one.
‫In fact, I.
‫Great.
‫So this is working fine.
‫Let me try to play with it as this point of time, we have our very top 50 picks.
‫What if I change that different position?
‫Things will be interesting.
‫I saved by 50 percent.
‫I need to get off politics and save.
‫You can see that how it is working.
‫So at zero percent, our rate is 50 percent.
‫And by the time it reaches 50 percent, we increase our world with 100 percent.
‫Let me be height.
‫Save this one.
‫OK.
‫This is interesting, right?
‫I hope you got the idea of what we are trying to do.
‫Let me try to change this bottom and say, maybe this is 50 100.
‫And maybe this is one and this is to under.
‫OK, this there's not interesting, it's pretty interesting we will change its position, but I hope
‫you got the idea what we are trying to do if you try to change the height again, maybe 150 here, so
‫you will see how this is going to work.
‫Oh, definitely, this is great.
‫Now there are a lot of options with this at this point of time, we are just using linear.
‫You can use any custom value order.
‫You can utilize ease and ease out.
‫That will definitely change how this is going to remember that website regarding cubic menser if we
‫compare this one and it.
‫I mean, if I save this one, you can see it's changing.
‫But for now, I'm going to work with the Senate itself, save this one.
‫OK.
‫This is great.
‫Now, what I am going to do is I'm going to add multiple items, so at this point of time, we just
‫played with one item.
‫What I cannot item two, item three undo lot of thing.
‫So the first thing I'm going to do is add them in the form of shorting properties I can utilize.
‫Any mention name is going to be move.
‫Duration is going to be once again.
‫And then timing function is going to be linear than currently we have no delay and iteration will be
‫in like.
‫Then our direction will be alternate and fell more or less.
‫Nothing much as default values in this one.
‫Also, let me remove this one saying things are working fine.
‫Great.
‫And what I'm going to do is I'm going to create a similar item.
‫But the thing is, I am going to change the background color.
‫Maybe something yellowish.
‫Great.
‫And take a bit of position difference.
‫Let me call this out.
‫One might say.
‫I had a problem is we just named it same item, one item on the item two.
‫OK.
‫This is working great.
‫Let me try to add another item.
‫Now, remember, we are utilizing this same animation for all animation, move animation, move on with
‫just this key frame and head, I'm going to have my eye on three at some distance.
‫Maybe let's call Twiggy and change the color hair.
‫This time, something blue or red.
‫Let's go with something related to red, save this one.
‫OK, I need to maintain some more distance.
‫Let me add 300.
‫Save this one.
‫Let me add it at three fifty.
‫OK, I need to to distance.
‫Hit me out at 3:10 and hope you got the idea, what we are trying to do.
‫Let me change this color, I don't know.
‫This is our country flag or not.
‫I have no idea.
‫Let me change change and also update this yellow to much lighter one.
‫So I hope you got the idea what we are trying to do now, if we add some sort of delay, things will
‫work in a different way.
‫For example, if I delay here after our timing function.
‫And let's see if I a delay of 500 milliseconds.
‫And let me add this to, but all of them.
‫But it will be different for ours, or it will be 100 for this and 50 for this and 500 for this, and
‫if I save this one, you can see that's how it is working.
‫Now this is important to understand how we are going to play things now.
‫We can do a lot of things, maybe transform them, scale them, rotate them whatever we want, and we
‫can create fancy animation.
‫Now remember, these type of animations are utilized while loading things are you can see some progress
‫bar.
‫So that's how this is going to work.
‫I hope you got the idea how we are going to utilize this animation.
‫Now, the motive of this lecture was to make you realize that one key frame or one type of animation
‫can be applied on multiple items and then we can change them according to their duration or delay as
‫well.
‫So it totally depends on us.
‫If I had the duration, things will be slower for each one of them if I see duration as five hundred
‫milliseconds.
‫So you will see yellows behaving very differently.
‫Let me go back with once again.
‫OK, now before ending this lecture, let me discuss this through creative prospect.
‫Maybe if you are utilizing a ball, I should say some circle.
‫You can change your size whenever it touches at the bottom so you can expand it a bit.
‫You can change the world and a lot of things.
‫So, for example, if I'm utilizing something like maybe border radius as 50 percent here.
‫But let me copy this one.
‫So this was 50 percent, and I don't want to change that height.
‫If I save this one here, you can see how this is working.
‫So now, instead of utilizing the bars, we are utilizing these cycles.
‫Are we going to change it?
‫We can change this speed here and maybe go with 500 milliseconds on this one.
‫And sort of this let me utilize 200 or I should say 150 millisecond, and that should be $200, I can
‫save this one.
‫Things are much faster.
‫You just need to coordinate these value.
‫Now, I totally depend on your creativity, how you can change things.
‫I hope this lecture was helpful.
‫Let me reverse these last changes.
‫I hope this lecture was helpful.
‫Thank you for calling.
‫And I see you guys in the next one.