Strings, Numbers and Animation
In this lecture we will be taking a deeper look into the process of creating animations. In the process we will explore the differences between numbers and strings.
Video Transcript
00:00In this lecture, we're going to take a deeper look into the process of creating an animation.
00:05We're really getting ready for the remainder of the chapter where our main topic is going to be variables.
00:11So let's get started.
00:13So our goal is, if we look for a second at our screen, is first step, I want to make everything invisible.
00:20To do that, I'm going to use CSS, and I'm going to go ahead and find the elements I want to make invisible,
00:26which in our case, it's our h2, it's our image, it's our p-tag.
00:32So I'm going to go ahead into my CSS, and let me just make it a little bit bigger.
00:36And in our CSS, I'm just going to find the image, here we go, and I'm going to set my opacity to 0.
00:42I'm going to go ahead and just copy this opacity, because I want to do the same thing to my p-bookwidth slide,
00:57which is where our copy is, and I want to do the same to our h2, and here we go, here is our h2.
01:04So if I save this, and I go back into my browser, and just click on refresh,
01:08we're going to see that all of our visual elements have now became invisible.
01:13They're gone, they're not here anymore.
01:15So let's jump right back in, and let's start getting them back.
01:20So I'm going to start with one, and I'm going to go ahead into my script area, where we have our console chapter 2.
01:25And again, we're not going to talk about why it's here any further for a while.
01:29For now, we're just going to put all of our code in between this opening curly bracket,
01:33to the closing curly bracket.
01:35Now, in the last chapter, that is, we talked about the tweenmax.from.
01:43In this lesson, I want to talk about the two.
01:46Now, the two works very similarly to the from, and let's pretend we didn't even talk about the from,
01:51just so we pretend this is fresh.
01:54So the first property we want to send in is the item itself.
01:58The second property is how long we want it to animate.
02:01And the last is the actual thing that we want to animate, the actual property that we want to animate.
02:07So it would be a property, and then the value that we want it to get to.
02:12So that is basically the formula.
02:14Now, you don't have to understand exactly why this is at this stage,
02:18but we're definitely going to cover it at a later chapter.
02:21So step one is we want to just take this format, and literally, I expect you to do the same.
02:26Just copy this format for now.
02:28You just have to know that this thing animates things from where it is to somewhere else.
02:34Now, we need to set what do we want to animate.
02:37And in our case, what I'm going to do is I'm going to send inside the item I want to animate.
02:41In my case, I want to animate this h2.
02:44Let me just make it a little bit smaller.
02:46So in my case, I want to animate the h2.
02:48Now, the easiest way to do this is sending a string inside, just like with properties in HTML,
02:54where you have a property, and then you have a value.
02:58That's exactly the same way that properties work in, almost the exact same way as properties work in JavaScript.
03:06In our case, I really want to basically define what I'm going to animate,
03:10and in this case, I'm going to send in a string, basically opening and closing a quotation mark,
03:16or a double quotation mark.
03:23It does not matter.
03:24It could be one quotation mark, as long as we're opening and closing with the same type of quotation mark.
03:30As you can see here, I've sent a string value, a copy value, to this function.
03:35It doesn't matter if we know what functions are at this stage, and we wrapped it around with this double quotation.
03:40Same thing we're going to do here for our first property,
03:43and I'm just going to send in the name of that property, and I'm going to use CSS for that.
03:48And you can see that this is going to be the name that I'm going to send to it.
03:52This is the same CSS rule, and I'm just going to send the same CSS rule as we have in the CSS to say,
03:58hey, animate this or change this CSS rule, basically.
04:02Now, by configuring it this way, it means that there's any other slide,
04:06because this is a class, if you recall, from HTML CSS.
04:11So a class means that I could have further other classes that have the same name.
04:15In other words, this might animate more than one thing,
04:19because it's actually changing globally anything that matches this rule.
04:24The next property that I want to change is how long our animation should be.
04:28In my case, I'm going to put here one for seconds, and notice the big difference here.
04:32On this end, I'm double quoting everything.
04:36While the second property, I'm putting here a number, and when I'm putting in a number,
04:40I'm not quoting anything around it, and that is because this is a number.
04:44Contrary to text, where I'm going to wrap around text with a double quotation.
04:50Now, I might ask you, why do you think the difference?
04:53Really, the most simple answer to that is text could have spaces inside of it,
04:58and it's really hard for a computer to know what you actually mean.
05:02If you don't quote it, well, it's not only hard.
05:04It's impossible for the computer or the browser to understand what this actually is,
05:08because there are a lot of things in JavaScript that have names, such as console,
05:13and console is not a string, and the way you differentiate between something that is a string,
05:18and everything else, is putting a quotation or a double quotation around any string,
05:23basically telling the computer, basically telling the browser,
05:26hey, don't try to calculate this, don't try to do something to us, this is just plain text.
05:31So, we basically wrap around our text with a double quotation or a quotation,
05:36which basically tells our code, by the way, all the stuff that's inside of here is a string.
05:43Contrary to that, numbers are just numbers, and there is no such thing as a number that's one space two.
05:48So, there's no mistake that I might think, where does this begin, where does it end,
05:52because numbers have very simple rules.
05:54Thus, numbers, not only they don't need to have a double quotation or quotation, you're not allowed to,
06:00because the quotation is basically reserved to strings.
06:03Perfect.
06:04Now, the last item is the property we want to animate.
06:07In our case, it's a CSS property, and that property is opacity.
06:12So, I'm going to go ahead and just copy that name opacity.
06:16Now, notice how for opacity, I didn't double quote it,
06:19and that is because we're not actually trying to write the word opacity,
06:24but we're trying to approach something that is called opacity.
06:27And then we'll pass into it a value.
06:29In this case, we want the opacity to turn into one.
06:32Now, again, I'm not talking about all these weird signs and symbols and all these beautiful things.
06:37We are going to talk about them as we progress throughout the chapters.
06:41What I do expect of you is to be able to take this, copy, paste it, and animate.
06:46So, let's go ahead, and I'm going to save this and go into my browser and just click on refresh,
06:52and we're going to hope that we're going to see our main text, our headline text fade in
06:56as we refresh the page, and it surely does.
06:59So, I want to leave you with a little bit of homework before we continue,
07:03and then we're going to continue in the next lecture.
07:06I want you to go ahead and just copy this rule another two times,
07:10and I want you to animate the two other properties that we dimmed out.
07:14We dimmed out our slider, blah, blah, blah here.
07:19We dimmed out our image.
07:21So, I want you to go through and create your animation as well,
07:24and I'll give you another secondary task is I want each animation to take a different amount of time.
07:30So, maybe one will take one second, the other a second and a half,
07:34and the last one will be two seconds.
07:37In the following video, we're going to do exactly that,
07:39but please don't just watch because learning doesn't happen from being passive.
07:44So, stop the video, go to your editor, and complete that task,
07:50and if you have any questions, please, please comment in the comments
07:53or even show us right here in your comments before you move on to the next lecture,
07:57show us what you did, and let's compare and see what each student has done so far.
08:02All right, so I'll see you in the comments section
08:04and in the next video once you complete this task.