Going back to TweenMax
Now that we know how to work with objects it's time for us to pimp out our animations. In this lecture are going back to the TweenMax library and really understand every single step in the way.
Video Transcript
00:00Now that we know how to create our own objects and freshly empty objects it's
00:07time for us to revisit back into our tweens because we've been working with
00:10objects in our tween library and it's time for us to go back to the tween
00:14library, implement this new realized information that we have about objects
00:18and see how much more cool things we could create with objects that we
00:21couldn't do until now. So let's start animating. Let me just turn on I'm gonna
00:26switch my CSS to chapter 3 because we didn't make any updates since then and I
00:30want everything to be on the stage when we're starting. So far we animated one
00:35thing at a time and the reason was was because we just didn't know how to work
00:39with objects. But now that we created these crazily cool and complicated
00:44objects it's time for us to see in action how could we actually use them
00:47for example using the tween max library. Now just a reminder tween max is an
00:53object as well although we're not using the new tween max and we could by the
00:57way as a side what we're not gonna get into that we approach a tween max as a
01:01static variable as just the same way as we would approach the math object. The
01:06next step is we want to actually approach one of its functions so in
01:10our case we want to approach the to animation or even the from because the
01:14from will make sure that it's where we are right now and then we want to start
01:17from somewhere else. So let's start what do we want to animate in my case I
01:21want to animate just my h2 just for the sake of this chapter sample. So I'm gonna
01:27go ahead and just say hey I want to animate h2 how long do I want the
01:31animation to take one second and then I'm sending inside an object exactly the
01:35way you know all this time we said just don't worry what that is so this
01:39is an object. So what we could have done if we wanted to we could have
01:41created a animation guide as an object and our animation guide could say okay
01:51so our animation guide it's from a from so I could say okay what we want to do is
01:55we want to set our opacity to zero we want to start with opacity of zero and we
02:02could literally just send it on to our tween max from now the power of using it
02:07in this way where we're setting our animation object separately from the
02:12actual sending it to our properties that we could call them later on more than
02:16one item. So let me just first see that it works if I come back in here and I
02:19click on refresh we'll see that our text is fading in great that's exactly what
02:23we expected it to do. So I could literally go ahead now and just copy
02:27this over again now what's happening is I'm using the same exact object to
02:32animate all those different items so I can go ahead and let's say I want to
02:35automate every image and let's say I want to also animate our paragraph so
02:42I'm gonna go ahead and use that as the oopsie use that as our class animate
02:47anything that has that class if I go ahead and I click on refresh and I run
02:52it again we'll see that we're actually using the same object to animate all
02:55those three elements at the same time. So that's an example of using an object
03:00now before we wrap this conversation up of using with objects I'm just gonna
03:04comment all this out because I want to show you how do we actually take
03:09advantage of the fact that we know now that we are working with objects and
03:12we said that we could send multiple properties at the same time right so if
03:17we have your our object and we said we want to set our opacity to start from 0
03:24I could put a comment and say hey I also want to start from top oopsie minus
03:32100 pixels and I could say I also want to start from my left let's say I want
03:37to start from 50 pixels and if I save this literally what I'm doing I'm saying
03:42hey I want to start from these three changes from these changed positions and
03:45animate all those three items back to the original position and take one second
03:50to do that so if I click on refresh now and I look go into my application we'll
03:54see that that did not work and the reason that did not work is kind of a
03:59surprise to me but what we could do just to test things out is I'm gonna go
04:03ahead and just select item inspect it with firebug go ahead here and try to
04:08see what properties could I take and change so if I have your I see that left
04:12is auto but if I set it to be a hundred pixels that doesn't do anything and
04:20that's the reason why it doesn't really help us but if I come inside of here
04:24and I try to find something that is animatable because how about we'll just
04:28change our position to be my padding to be starting from plus of a hundred
04:33all right so we're gonna instead of change our padding or how about we
04:37change our font size so we could animate our font size starting from
04:40let's say five pixels so I go inside of here I'll change here the font and we
04:45said the web font size notice how in CSS I would have your font size with a dash
04:53in JavaScript I'm gonna go ahead and put here an uppercase instead of using the
04:57dash so I'm gonna set your font size and say hey how about start from 10
05:01pixels or let's say 5 pixels even and as we said the left doesn't work so
05:05let me just get rid of that for now because it's just not a property that we
05:08could animate as we saw in our CSS and if I click on refresh now we should see
05:12that our copy now our font size is gonna grow and grow and grow until it reaches
05:17the size that it needs to be so notice how we're also fading in and also
05:21changing at the same time now again if we wanted to we could also set our
05:25padding so we could start from a padding let's say of 50 so we could
05:29set here another property of padding and start from 50 pixels and go ahead and
05:35refresh and we'll see in that will have three animations happening at the same
05:38time notice how that copy starts coming in because the padding is changing so
05:43this is absolutely wicked and this is how you work with objects and why there
05:48are a lot more powerful loads and then just working with directly with one
05:51variable because if we had to send your every variable separately remember how
05:55we were working with functions we would have your 100 properties but once
05:59we're sending an object in we could only we could send only the stuff that
06:02we want to send in so that makes it incredibly powerful before we move on to
06:06the next topic in the next lesson I want to talk about another big difference
06:10between objects and primitive variables the ones we saw in the earlier chapters
06:17which were numbers strings and booleans so see you in the next lesson where we
06:21explore the biggest differences between those two items