What do you want to learn? Leverged jhuang@tampa.cgsinc.com Skip to main content Pluralsight uses cookies.Learn more about your privacy Building Advanced JavaScript Animations with GSAP by Todd Shelton This course will teach JavaScript developers, who have already completed the first Animation with GSAP course, or have a good understanding of JavaScript, animation in general. Resume CourseBookmarkAdd to Channel Table of contents Description Transcript Exercise files Discussion Recommended Course Overview Course Overview Hi everyone. My name is Todd Shelton, and welcome to my course, Building Advanced JavaScript Animations with GSAP or GreenSock Animation Platform. I'm a freelance developer, as well as a professor down at Indiana University doing front-end and mobile web development. GreenSock's been around since Action Script 2 and Flash. Since then it's kept up with the industry, and turned into one of the leading JavaScript animation libraries. In this course we're going to be covering some of the plugins that are associated with the paid version of GreenSock. Some of the major topics that we'll cover include drawing SVG, morph SVG, scramble text, and also split text. By the end of this course you'll know how to create some unbelievable animation for creative storytelling or games. Before beginning this course, though, you need to become a club GreenSock member to get the plugins needed to complete this course. From here you'll feel comfortable about creating interactive websites with a lot of animation. I hope you'll join me on this journey to learn GreenSock with Building Advanced JavaScript Animations with GSAP course at Pluralsight. Getting Started Building Advanced JavaScript Animations with GSAP Hi. I'm Todd Shelton, and I'm going to be your instructor for this course on Building Advanced JavaScript Animations with GreenSocks Animation Platform or better known as GSAP. So what are we going to be learning through this? Well, first of all, we're going to discuss what you need and where to get it. What I mean by that is this is an advanced course for GreenSock, and you're going to be using some members-only or paid for versions of GreenSock. Let's look and see where you need to get those. So if you go to greensock.com and click on Club GreenSock in here you'll notice that they're going to talk to you about what GreenSock is or Club GreenSock is, then down here you can select a plan. Now most of the features we're going to talk about are located inside of this Shockingly Green plan. Now if you're making a lot of apps a year or you're using animations, then this is the plan for you. As you can see, you can go down through here, and see what's added in the Shockingly Green or the Simply Green or Business Green. Everything that we're going to use through this course is going to be in the Shockingly Green column. You can use some of these, and actually the scrambleText and the DrawSVG are located in the Simply Green, but the only other features is the morphSVG and the SplitText. Those are the other ones that are not in the Simply Green, so to be safe, join the Shockingly Green plan. It's $99 a year, and I would highly advise doing it if you are into animation. I have to clarify that none of this library is included in any of the demo projects, so you have to become a member of GreenSock in order to be able to complete this course because it does feature the plugins of GreenSock in order for you to use them for this course. Now that we understand what we need and where to get it, let's see what else we're going to cover in this course. We're going to talk about ScrambleText plugin. Now the ScrambleText plugin is basically a way for you to bring text onto a screen, and it scrambles across the screen, and you can use this in a lot of different ways. You can use it to reveal hidden words or in games to make puzzles and things like that. That is one of the nice features that are in one of the plugins. We're going to talk about SplitText, and that's going to allow you to split up words into letters or words or even lines of code, so if you have a whole paragraph with 10 sentences you can do it by lines, words or characters, and to me, SplitText is a great utility to use for animation in different projects. We're going to take a look at SVG Code, how to get it out of Illustrator, how to set it up, how it's structured, and how to clean it up. That's very important when you start animating your SVGs. We're going to look at morphing SVGs. This is one of the plugins that's in the Shockingly Green membership, and you can morph different SVGs into another shape. This is a very cool plugin, and if you do a lot of animations or story telling this would be almost imperative for you to have. We're going to learn to draw SVGs. You can do some cool effects with the DrawSVG by animating the stroke of the SVG, and finally, we're going to bring it all together with our final project, and that's creating a web banner that's going to bring all of these features into one project. I hope you enjoy this course. Now let's get going and creating and learning about our first plugin, which is ScrambleText. Using the ScrambleText Plugin Introduction In this module we're going to be talking about the ScrambleText plugin. It's a very lightweight plugin, and does some great animations on revealing your phrases or paragraphs or text in general. So I want to start off by saying that if you've never used GreenSock I would recommend going over to JavaScript Animation with GSAP in Pluralsight, and here's the URL for it. It's one of my earlier course talking about how to use GreenSock. It will help you get through this course and some of the more powerful plugins that GreenSock has to offer. Now what's this course or what's this module going to be about? One thing we're going to talk about is how to understand and what is ScrambleText and what is the plugin. The next thing we're going to talk about is how to layout your HTML and CSS. This is very brief because these demos are very easily laid out. There's not a whole lot of design to them. This is more about how to basically use them and get them into your projects. The next thing is how to customize the text that gets scrambled or unscrambled, so there's a lot of ways to do that inside of GreenSock. We're going to learn the attributes that you can use to adjust the properties on ScrambleText, and last, but not least, we're going to learn to add the features of ScrambleText to a timeline, so if you want it to stop after a word or do something like that you can easily do that with the the use of GreenSock's timeline feature. Now what does ScrambleText look like? So it starts off scrambled, and it'll go through there. Now this is just a static graphic right here, but in the demos you will see them actually rotating through and revealing what your phrase would say, so in this instance all the letters that's mixed up up at the top it will end up mixing up, jumbling around, and then reveal the phrase that you have. In this case, it would take all those mixed up letters up there at the top, and turn them into, this is time to use GreenSock. Now you can use whatever phrase or letters that you want, which is really nice on basically if you want X's and O's or anything like that to be used as the scrambled part, and we'll discuss more of that in the next video. So what does that actually look like? Well, if you watched the first course on GreenSock it's basically the same thing, TweenMax, call out your element that you want to scramble, give it a time, and then you put in the scrambled text, and this is the text that's actually going to get revealed, so it's very easily done and easy to code. With one line of code just right here you have just used the ScrambleText plugin. Now what's this demo going to be about? Well, creating a project in PHPStorm, that's the IDE that I use. You can use whatever you want to for these. It's not based on anything. As long as you can write HTML, CSS, and JavaScript you're perfectly fine. Setting up HTML and CSS, that's another thing in this demo, but again, it's just going to be an overview. We need to make sure our JavaScript file gets ready. Now again, this is going to be a high level overview, just like our HTML and CSS, but there's a few things that we need to know about. One is we need to make sure that the document is loaded, okay, or images are loaded on the page, and in our case for ScrambleText, of course the text needs to be loaded first. Alright, then we need to make sure that the tween is being called, and basically that happens inside of JavaScript, so we need to make sure that the function or the tween is getting called to make sure that it works. So if you have this basic understanding of what we're going to cover in this module, and you've already taken the other courses or you're pretty familiar with JavaScript already, let's go ahead and get started. In the next video we're going to create the demo and get everything running. Setting up and Importing So now that we know what ScrambleText is, let's go ahead and get our HTML and CSS set up, and get our plugin imported into our project. So here you see we just have a basic HTML page. I have a basic reset put into my style sheet. You can do resets however you want to. This is just my little simple one here. So we're going to go into our index file right now, and you'll notice also before we start changing our index, just look at the basic structure. This will be the structure throughout the rest of this course. We have a CSS folder, a JavaScript directory, a library directory. Inside of lib we're going to have gsap, and chances are there's going to be a jQuery inside of there as well. So let's go ahead and start getting our script inside of there. So we want a div class, and we're going to give this a class, and we're going to call it content-wrapper. Now you can do whatever you want, and as your projects grow or as you implement things inside of there you can change this to whatever you want. The ScrambleText plugin works anywhere, and you can call them out very easily. Inside of content-wrapper we're going to actually have an h1, and we're just going to put a ScrambleText inside there like this, and call it Plugin. After that we're going to come down and put another div, and give this a class of textArea, and inside of there we're going to have a paragraph tag, here is the text. Okay, so now we're going to come in there and just save that, and we need to change our style sheet. So in our style sheet we're going to go ahead and start styling our content-wrapper. One thing that we want there is we want to make sure that we have a color of white, and that's going to change all the font color. We're going to put a min-height in there of 100%. Alright, we're going to put a width of 100%. We're going to change the background color to black, add some padding in there, so our text isn't laid up right next to the edges of it. We're going to put some box-sizing on there too as well, border-box. We're going to add display, and we're going to put that as flex, so we can align our elements easier, and then we're going to add flex-direction to column. Okay. Alright, so our content-wrapper's done here so far. The next thing we're going to do is the h1, and just align that real quick, and all we're going to do is do width of 100%. We're going to add padding to the bottom of that of like 10 pixels. You can make this whatever you would like to, and we're going to add a border on the bottom, and we're going to say that is white, solid, and it's going to be about 4 pixels thick, and let's go ahead and jump up here to the top of this h1, and say align-self, and we want to do flex-start. So that's going to align that over to the top left for us. The next thing we need to style is going to be the textArea. Okay, now that we have our textArea up there we're going to give it a margin of 0, and what this is going to do is just basically align that center using that display flex, which is really nice if you've never used it. I've got to spell margin right though. Alright, there we go. Bring it back down. The next thing, we want a min-height of this one as well, and we're going to say 400 pixels, give it a width of about 90%, and let's go ahead and give that a border as well, and a white border. Make that solid, and give it a 2 pixel thickness. So that pretty much styles our page. Now remember, we already had our text inside of here, ScrambleText, and you've got to spell that right as well, and the plugin in here is the text, and this is the text we're going to be changing, but when we preview this page you're going to be able to see this text. Let's take a look at this and see what happens. So you'll notice that our page is black, we have the underline going all the way across the ScrambleText, and then we have our text in there. So now let's go over and get our own JavaScript file going, and make sure that you have jQuery in there. Okay, if you don't just go to jquery.com and download that, and when you do download that make sure that it goes under your live directory that's in your project. Now I'm going to assume that after listening to module one we talked about the membership of GreenSock, and you've already paid, and got your membership, and got all those plugins. Okay, so you should have those stored on your computer someplace or downloaded those somewhere. I would not download those into a project by themselves. Download them into some other folder on your computer, so you have them, and you can import them into your projects. Let's jump over to our code and then see how to get all of that into there. Here we are back in the code. As you can see on my lib, jQuery is installed in there. Okay, now I'm using 3.1, okay, .1, and it's the min version, and now we need to get GreenSock in there as well. Now I have mine on the computer, and as you can see, it's the GreenSock, it's the business-green model. I'm going to go to source, I'm going to go to minified, and I'm just going to copy everything in there for right now, and I'm just going to paste this into my project, and it's going to pull up this one file for me. Let's delete that or not delete it, but let's close it out. So, as you can see, in the gsap I have the easing plugins and utils, and we also have TweenMax in there as well, TweenLite, and everything else that we're going to be using. So let's go ahead and bring those into our project. The first thing that we need to do is get our jQuery in there, so first thing is we're going to go into lib, and just start typing jquery here, and let that be brought in. The next thing is we need to bring in GreenSock. Now the first thing that you want to bring in is TweenMax, okay, so let's go ahead and do lib, and gsap. Now I know we talked about this in the other course, but you can bring these in through CDN or however you want to. I'm just bringing them through the lib right now because the plugins are paid, and you can't do that through a CDN, and I'm not going to put them up anywhere for people to get. So I'm just going to do those locally throughout this course, and now we need to just bring in TweenMax. Now that we have that we need to bring in the plugin, and we're going to do src here, and we're going to do lib. Now this goes down a little bit deeper. Of course, we're in the GreenSock right here, and then we're going to go down to plugins, and the next thing you want is the ScrambleTextPlugin, so make sure it's a capital S, and right there it is, ScrambleTextPlugin. Last, but not least, we need to create an implement or import our JavaScript file, and we're just going to do that by doing this. We're going to put ours in the JavaScript, and we haven't created it yet, but that's easy to do on PHPStorm. Okay, I just hit Alt+Enter, and you get this dialog box, and create this. Alright, so now we have this file created, our app.js. Our whole project is set up and ready to go. Okay, I'm going to go ahead and leave this open just so you can see how it works. Just to test this if you wanted to, we're just going to do a very simple Tween, and we're going to do TweenMax.to, okay, and now this is the syntax. If you're not used to the syntax for GreenSock you need to go back and watch the first introduction course. The next thing we need to do is actually get the tween running. Okay, so it always starts and opens with a parentheses, and then we call out what we want to tween or what our target is. Now in jQuery you use the dollar sign in that syntax. Here I'm just going to use, GreenSock allows us to just use the quotes, and call it out, and I'm just going to put textArea. Okay, I want to do the p tag that's inside of the textArea. The next argument is the speed that we want to do this at, which is two, and then finally, we're going to get to our arguments here. So let me get this back, here we go, and we're just going to put in scrambleText like that, and then the only thing we have to put in is, this is the next text, and once you run this your page, it should change the text that's already in the paragraph tag to the new text that we place here. Let's go take a look and see if it did. We're back in our browser. I'm going to run refresh. Let's see if our text should work. Now because I have that TweenMax out there, as soon as the JavaScript file runs it's going to hit and run, so let's see what happens. So, as you can see, it switched over from, this is the text, to this is the next text, and there was a lot of letters that got jumbled up inside there, so let's take a look at this again, and see what happens. I'm just going to refresh it, and there you have it. You've got some scrambled text going on. So our project is now set up, and we know this is running right. If you are having trouble throughout this I would recommend finding out how to debug some of your browsers, but I'm going to give you some quick advice here. In our browser, if you do not see the text going very well or you don't see anything happening, make sure you right-click on your browser. Now I'm using Chrome, but this works in Firefox and also Safari as well. So this is development tools. Okay, you can go to Console, and if you have an error it'll probably show up there. One of the errors that you might see is something like, doesn't understand what the dollar sign means, and we haven't used that yet, but that could possibly mean that jQuery is not in your project or that it is not above your app.js file. The same thing would go if you did not structure your plugins correctly. So again, that would show up in the console, and what do I mean by the plugins correctly? If we go back to our index page here jQuery should always be first, then TweenMax, and then the plugin, and then your app.js file, so again, make sure the hierarchy is correct. That's our first project to get ScrambleText going. In the next video we're actually going to start adding some attributes and making it look the way we want it to. Customizing In this video we're going to be adding more properties to our tween to allow us to customize how our revealed text looks. It's also going to allow us to customize the scrambling text that goes across the stage. Now in our style sheet I added a font-size to our paragraph tag. This has nothing to do with the tween at all, I just made the font size bigger, so you can see it easier in these videos. Now let's jump over to our app.js and get started. What we have here is the basic tween that's allowed in TweenMax or even in anything for the ScrambleTextPlugin, and you can do this, but it's going to take all the default settings that are in there, but how do we set this up, so we can add more properties? Well first, we're going to remove this text here, and I'm just cutting it out, I'm not doing anything crazy, and I need to add a generic object, and in order to do that we just add two curly braces, and that creates our object. Now we can start adding properties and values inside. The first property we're going to do is we need to get back to where our text is inside of our ScrambleText. We're going to put text, and then we're going to paste the string that we had in there before. Now basically we are back to where we started. This is going to put this as the next text on our stage. Now we need to add more properties, and one of the first ones we want to do is we're going to add a property called chars, and what chars does is allow us to customize the scrambling letters that go across the screen as it reveals our text, and in this case, I'm actually going to put X's and O's, and you can put words in there or even go even further, but right now it's going to put X's and O's across there, and then it's going to reveal our text. There's some other things that we can put in chars as well. Some of them are uppercase, lowercase, upper and lowercase, and we can do the customized string, which I'm doing here with the X's and O's. We'll change that to uppercase or lowercase here in just a little bit. Now the default of this chars is uppercase, so just so you know that. So if we go back over, and we take a look at our browser you're going to see that the text hasn't changed. It's still going to take 2 seconds, and you're going to see the scrambling text by X's and O's. So here we are in a browser. I'm going to refresh it, and you'll notice that all of the scrambling text are X's and O's, so that's a great thing. We've changed that. Now we need to add some new things, and we need to reveal, talk about revealing delays. So I'm going to add a few more properties, so I don't have to keep jumping back and forth, and we'll talk through those, and then jump over and reveal them all at once. So after chars we're going to add a couple more properties in there. One is the revealDelay. Now by default it's set to 0. Now the revealDelay is going to show those scrambled letters going across there, but it's whatever number we put in here, that's how long that it's going to sit there and scramble before they start revealing our text. Now before we go any further we have to realize the tween duration here. The tween duration is set at 2 seconds, and you can see that here. The revealDelay, though, is going to eat up that tween duration, so if we put 1 second it's going to reveal or just show the scrambled text for 1 second, and then our actual reveal is only going to last 1 second instead of 2. So if we want it to scramble for a second, but still take 2 seconds, we need to change some of the numbers. Let me show you how to work that. We need to put a comma, and we're going to put revealDelay, okay, and then we're going to add a property in there. Now this is just a number, and right now we're going to put 1. So this is going to show those scrambled text letters for 1 second, and then it's going to reveal in 1 second. Now if you really want it to reveal for 2 seconds make sure you change that to 3. Okay, so it's going to sit there and scramble. Now I'm going to exaggerate this, so you can see how this is happening, so I'm going to change this to 5, and I'm going to change this reveal to 3 seconds, so it's going to sit there on the screen and just scramble for 3 seconds, and then it's going to take another 2 to reveal the characters. Now remember, we're still going to have the X's and O's up there scrambling back and forth. The next two properties are really cool, and there are ways that we can change the styling. So the first one is called oldClass, so I'm going to put a comma, and then type oldClass. Okay, and there's the oldClass, and we're just going to put in a string of oldClass. Now this is any class name, so this is just like stylesheets. Whatever class name you want to name it you can put in here. I just wanted to show you, so the stylesheet is similar. Okay, so we have an oldClass. I want to show you my stylesheet, I already have those in there. Down here at the bottom I have oldClass, and the oldClass color is green. That's all we're changing the style to. Now what does oldClass do? Well that changes the styling to the scrambled text, so now when we refresh our browser here in a minute you're going to see all the scrambled letters turn to green. That's pretty cool because now we can change all the styling for all of those letters. Now you'll also see this newClass down here, and we're going to add that here in just a second, and this new class has basically changed the color of the font to like a pink. Okay, so that's going to be the revealed text, and it does it on the fly, so the original text on the screen will be white, okay, the new revealed text is going to be pink, and the re-scrambling text is going to be green. Let's jump over to our app. I want to change one more. Now we're not seeing the original text at all here in this example, so if you watch the first course that we did on GreenSock one thing that we can do is put in delay, and I want to delay that by 1 second. Okay, so here we just delayed 1 second, and now we're adding all of our ScrambleText properties through here. So again, here's our text that we want to reveal, here's the characters that it's going to scramble across the stage. It's going to take 3 seconds of just scrambling before it reveals our text for 2 seconds, and don't forget, this 3 seconds takes away from this total tween duration. We have an oldClass in here that's going to change the ScrambleText styling, and now last, but not least, we need to add newClass, and we're just going to put newClass in there. Remember that was in our stylesheet, and don't forget to add our comma here. Alright, so that's enough properties where we can go and take a look at this in the browser, and you should see a lot of new things happening, so let's take a look at this. If I'm in the browser you're going to see the original text for at least 1 second to 2 seconds. Notice how the green scrambled text is lasting for 3 seconds, and then it tween durations for 2 seconds, and then you'll notice that the text is now pink. Let's take a look at that again. Now the original text is on there for 2 seconds, the scrambled text is on there for 3, it takes 2 seconds to reveal the text, and then we have green text, which is the oldClass, and we have the pink text, which is the newClass. Watch it one more time. Here is the delay we put in. Here is the revealDelay for three seconds, and then here is the text going across, and that whole thing lasts for 2 seconds. These are all really cool properties that you can do inside of ScrambleText. There's a couple more that you can do. So we're back in our code here, and I'm going to jump to the end, just like always. We're going to add speed in here. Now what speed does is it controls how frequently the scrambled characters are refreshed. So, by default, it's set to one, and if you want it to slow down about how they're refreshed unscrambling you go down from one. Okay, so in here we're going to just put in speed, and I'm going to set this to an exaggeration of 0.1, and don't forget this comma over here. Okay, so now we have a speed that's 0.1. The last one I want to talk to you about is right to left, and it's a Boolean, so it sounds exactly what it is. If you want it to be revealed from the right to the left you can set this to true. Okay, so we're just going to put rightToLeft, and we're going to set it to true, and don't forget your comma here, and with that done, and the speed set to 0.1, we're going to jump over to our browser and refresh. Now you're going to notice some things happening, and it's going to have all of the other properties in here, the oldClass, and newClass, how long it takes to reveal, and the delay of 1, but it's going to reveal from the right hand side and go left. It's also going to take 0.1 to refresh those letters that are being scrambled. Let's go check this out. Here we are in a browser. I'm going to refresh this, and you'll notice they kind of, they don't refresh a lot, and we have that set to 0.1. Now that was an over exaggeration, but you can see how it looks like it's just being jotted around, so however you want those to be scrambled, you have that customization of speed to allow you to do that, and you'll notice that we also revealed this from right to left. I just refreshed it. Look at the speed really slow, and then we start unveiling from the right to the left. That's really cool. Now this has allowed us to do a lot of things with scrambled text. I hope you enjoyed watching how we customized this, but there's one other thing I want to change just so you can see it. We're going to jump over to the code. Now one of the other things I want to show you is this chars. I told you that you could use uppercase and lowercase, so in there I want to change the XO to lower, now Case is CamelCase, so make sure it says lowerCase there, and let's go look at what our ScrambleText looks like. I'm going to jump back over there. I'm going to refresh this. All of our properties stay the same, but look at the ScrambleText. They're all lowercase. As you can see, they're all lower, so you may want this. You can also do upper and lowercase, which would then show all of the ScrambleText in upper and lowercase. There's a lot of things that you can do with this, and I hope you enjoyed learning about the ScrambleText. Summary So I hope you enjoyed learning about ScrambleText, and everything it did, and remember how easy it is to write the code to make this ScrambleText work. The HTML was very easy. I hate overcomplicating projects, but your projects can be as complicated as you want, but it is as easy to implement as just calling the selector like this. What did we learn, and where are we going? GreenSock's done a great job of making it very easy to implement ScrambleText into your projects, and very easy to customize. I've shown you some very easy ways to implement it, showed you how to import it into your project, and then how to use it, and some of the properties that we can use in that generic object, but what can you do with it? So one thing that we talked about is making games. You can make a lot of games with ScrambleText, you know, to unscramble a code or basically do like ticker tapes or something like that in a game. Also, you can add this to a timeline, and we've talked about that in the first course of GreenSock. So you can add this to a timeline, just like you can any other tweens. Now, what's coming up next? We're going to use a utility called SplitText, and I think you're going to find this really neat to use. It's not like ScrambleText, but you're going to be able to bust up the text and add tweens to it as you want. So stick around, this'll be really good. Using the SplitText Plugin SplitText Introduction In this module we're going to be talking about the SplitText Utility. Now this has nothing to do with the ScrambleText plugin, and actually the SplitText is located in the util folder when you download GreenSock. Now what I'm going to be talking about is how SplitText looks in HTML. GreenSock's done a great job of how they've structured this different from all the other libraries, and we're going to talk about why it's important that they did this. We're going to learn about the properties that you need to use with SplitText to get it to work correctly. We're going to create timelines and how to nest timelines. Now we've talked about this in the beginning course, and we're not going to cover them in depth, but I am going to show you how to set one up, and how to nest a timeline inside of it. We're also going to learn how to use attributes to adjust the properties of all the words or anything else that we're using with SplitText, and we're going to learn how to trigger the timeline to start. So you can have a button that plays it, stops it, delays it or whatever, but we are going to take a look at that. Now GreenSock splits the text into words, letters or lines. I think it's very important that you know the three things that it splits it in, and why it splits it into there. Now it wraps all the letters, words, and lines, whichever ones you want, and it wraps them in divs, and I think that is really great that it does that because you can style so much more with divs than you can like spans or anything else, and then, of course, instead of just using block they use inline block to make this work. Now just let it do what it has to do. You don't need to worry about it, just know that that's what they wrap around it, and we're going to take a look at that in the HTML when we get our project up and going. Now it stores all of these elements, no matter what you use, your words, your letters or your lines, and it stores them all as arrays, so you can do whatever you want with these arrays, and it's very cool. And last, it can revert your whole text or your paragraphs or whatever you're doing, it reverts them back to normal if you want it to, which I think is very cool because sometimes after you animate you don't need all those divs in there anymore, so you can just revert it back to normal, and you don't even see it jump around, which is very cool. Now let's take a look and see what it looks like. The first thing you'll notice is that we created a variable, and we just called it myText, and we turned it into a new SplitText, and then of course you have your selector, which is where all your text is going to be located, and then the type, that's very important. Here we selected the characters, which is letters, okay, or the lines, which is sentences, so we've actually got both inside of there. Then you'll notice in the second line here we're going to choose the letters for our tweening. So we created another variable called characters, and then we accessed those characters using that variable, myText.chars, which is basically myText.characters, and it's going to get all the letters that are inside of that selector that we had there. Next, we just use the normal TweenMax tween or TweenLite to run through that array of characters, and then we're going to rotate them 180 degrees, and I think you'll, you know, if you use the beginning course or if you've watched that before, you'll understand the rotation next, and this tween, and going through the arrays should be very easy to understand. Now what are we going to talk about during the demo? Well, we're going to learn how to generate the SplitText, which we talked about there, and I showed you in that small snippet of code. We're going to work with arrays. Now I'm going to use a jQuery to loop through our arrays, but I'll also show you how to create a function and do a for loop if you wanted to, in case you don't like using jQuery. We're going to create a timeline, which I've talked about, and we're going to talk about adding a tween to that timeline, and then last, but not least, we're going to nest another timeline inside of that timeline. So I think it's time to get started, and just show you how important and how cool SplitText can be to your project. Setting up SplitText and Animating Letters In this video we're going to talk about how to start implementing SplitText. So here's our HTML, and we basically just have a short story in here. We have the book wrapper, and we have some pages. We have a header, and then the story. Down here we've imported all of our script tags that we need. We have jQuery, we have SplitText, and we have TweenMax. Remember that I will not be including the GreenSock library inside of here. Finally, we have our app.js file. The style sheet is very simple. We've embedded some fonts, we've used them in a couple of different places, and then we've basically just added a background image, and then display flex to center things. Now let's get working on our SplitText. I want to show you what our page looks like now without using any kind of SplitText at all. So you can see here, we have a story set up, it's written in a book, it's called, The Mysterious Chin Moss, and basically we're going to start animating this page in. So if you really wanted to you could have some buttons on the side, and really turn this into a very interactive book if you really wanted to, but we want to make this title start animating in. How do we do that? Well first, we're going to start adding a timeline in here, so maybe later on we can scrub this back and forth, but I like timelines because you can sequence animations very easy instead of having to worry about all the delays and everything that you have to put on them to sequence, so the first thing I want to do is create a variable, and we're going to call this the masterTimeline here, and it's going to be equal to a new TimelineLite. Now right now we're not going to add any properties to our timeline. We may here in just a little bit. The next thing I need to do is set up my SplitText. So create a variable, and we're going to call this myHeaderText, and myHeaderText is actually going to be equal to a new SplitText, and that's what we've been talking about is the SplitText. Now first I need to get the selector inside of there, and the way you do that is almost like jQuery, except minus the dollar sign here. We're just going to call pages, and then we're going to call header. Now I put a class of header inside of my h2 tag, but you could easily have called an h2 if you wanted to. Now inside of there we need to specify what we want to split, and you do that by adding a generic object inside of here, and we're going to put type, and the first thing is character, so chars and lines. Okay, and then I'm going to shorthand that, and we're going to get down to the next line. So basically on that SplitText we have the selector, which is pages and header, and those are classes, that's why they have a period in front of them. Then we have type, and the type that we're going to split. In this case, chars, and I needed to add an s to this, by the way, because it's more than one, so its characters, and we're going to split it up in lines as well. Now down here for our shorthand we're just creating another variable, and I'm going to call this headerLines, and that's going to be equal to myHeaderText.lines. So basically we took, if there was multiple lines here, we just created an array of all the lines, and stored them into header lines. Now we need to get all of our characters, and we're just going to call headerChars equal to myHeaderText.chars, and don't forget the semicolon on that because that's the end of our shorthand there. So our SplitText is pretty simple to set up. You see our SplitText over here. We created a new one. We got the selector. We decided what types we wanted, which in this case was characters and lines, and we've got the arrays set up in headerLines and header characters. Let's add this to a timeline, to our master timeline, and add the tween to it. So we're going to go masterTimeline.staggerFrom, okay, here you go. Now and remember, staggerFrom goes from whatever properties we add in here to whatever they are now, so now they're fully visible on our page, so whatever we put in this property is going to take them to that property, and I'll talk through that a little bit more. The first thing we need is just the header characters here. So staggerFrom staggers these array of items, and header characters is that array, so right now we're going to tween the characters. We want that to last 1 second, and then create a generic object here wherein we're going to change the opacity on these. So right now we're going to go from opacity of 0 to 1. Next, we need to add basically this kind of little delay here, and this basically delays each character when it animates onto the page. We're going to start off with 0.1. You can play with this if you want to. So let's check this out, and see what our header does right now. Here's our book, and you can see everything looks the same, but when I refresh it the header should disappear, and you should start seeing it animate on the page, and there it was. The Mysterious Chin Moss just came across there, and it came from the opacity of 0 to full opacity. Now it started immediately when the page refreshed. Okay, now we can learn more about timelines in my beginning animation course, but we want to change this right now. Then I want it to do something else when it animates in. To me, that was just a little bit too easy. I want it to start doing something else. Let's go fix our timeline, and add another property to this header. So here we are back in our editor. I'm going to add one other property inside of here, and this one is going to be rotationX, and we want that to go from a rotation of 100 degrees back to its normal, 0, okay, and then it's going to go from opacity of 0 up to 1. Now what I want to do in the timeline is I want that to delay 2 seconds. If I could spell delay right. There we go, 2 seconds. We've added a delay to the masterTimeline, so now when I refresh the page it's going to stay blank for 2 seconds, and then it's going to animate our header on there. Let's see where we are right now. Again, here's our header. Up there I'm going to refresh. It's going to take 2 seconds before the animation starts. Now you start seeing it rotate, and you start seeing it animate onto the book. I think this is kind of a very cool introduction to a book, especially to a kid's book or something because it kind of keeps their attention, and has very good animation. Again, watch it animate onto the page, and you can change almost any property you wanted to. If you really wanted to get it rotating anyway, let's go back and just add another property. In this case, I want to add rotation here, and we'll say we want to do rotation at 180 as well, okay, and then we're going to go back. Here we are. I'm going to refresh, it'll disappear, take 2 seconds, and then we should start seeing those characters really start doing some spinning here, and it gave it a whole new animation, and a whole new look. I kind of like this one a little bit better with the X and the Y moving so much, so let's see what it looks like one more time, and that is how we control each character inside of that header. There's another thing that we can do, and that's for The End word at the very bottom. Let's do this one real quick. So basically for the end tag I'm just going to copy most of this code because it's set up exactly the same. I'm just going to paste it down here. Now if we look at our index page to get the class you'll notice that the end has a class called end, okay, and that's also in story and inside of pages. I'm going to come back to my app.js, and I'm going to change this to endText, and now I can copy this, and basically just replace these right here, and we can instead of pages header, now remember where this is located, it's in pages, and then it's down here at the end, so we're going to change this from pages to end here, and we still want characters and lines. We need to change the headerLines and the header characters, and we'll just call this endLines and end characters or endChars. The next thing we need to do is add this animation basically to The End, so I'm going to duplicate this line because it's almost identical, and all we're going to do here is just out endChars here. We want to leave this identical, and because we've put this in a timeline they're automatically sequenced. Let's see what happens now. As you can see, the header's up there, the end tag down at the bottom is there, but when we refresh remember, 2 seconds top header animation, and then the end animation, and The End comes in. It's very easy to do. GreenSock's done an unbelievable job of letting us animate these words and characters on the page. In the next video we're actually going to get all the paragraphs working, and start working with the lines. Animating a Short Story So now that we have our header going and the end working, let's start working on those two middle paragraphs. So what are we going to do with those? Let's jump over to our code, and get that working. So here we are in our code. There's a couple things I do want to fix here. One is in our index I want to move this end paragraph tag. I want to take that out of there, move it outside of story, and just leave it inside of pages, okay. It's not going to change anything at all. It will still work because you still have pages and end, and that's basically how it's set up. Now story is just all the paragraphs inside, so in here we're going to have to grab and make a new SplitText for our story. So we're just going to do a var, and do storyText, and if you want you can copy all that too, and just change it, and it's new SplitText, and again, where is it located? Now this is just in story. Okay, that's all we need, and then inside of that we are going to put a generic object, and we're going to do a type, and then we're going to do chars, and lines, and again, we're just going to do a shortcut here, and we're going to call this storyLines is equal to storyText. and then lines of course. Another shorthand here is storyChars equal to storyText.chars here. So now we have our characters in an array and all of our lines in an array. Now all we have to do here is just duplicate this line, and now change headerChars to storyChars, and we should be able to see what happens. Now this is probably going to move a little fast, but we'll check it out and see what happens. So we have our headers moving. Now we have our paragraphs working, and then we have the end characters working, and since we have them in a timeline still they will sequence. Let's check it out. Here we go. We're back in the browser. Let's refresh, and you'll notice everything disappears, the header comes on, now the paragraphs start working in, but you'll notice that all the letters are coming in on their own, and you'll start noticing as we go through here that some of the letters might start being mixed up, the words won't finish. So, but then stop as quickly. So you'll notice the s is off of top right there on that next to the last sentence in that paragraph. The boy was, was is broken up, so it's important to look at those words and see how it works. Now in normal divs the words would stay together, so what's going on? So going back to knowing in the opening that we talked about is that all of these letters now are wrapped in divs, and this just will not work because you cannot have words broken up. Well, also, they kind of came on there wrong, and if you're reading a book you don't normally go by letters. What we normally go by is words. Let's fix this. So here we are. We're back in the code, and instead of characters I'm going to change this to words, and then instead of chars here I'm going to change that to words, and then finally change our variable name to words. One last thing, just because you changed all of this, you still have to change the one right here as well. Now these are probably going to go on there pretty quick. Let's check it out. Here we are. Let's watch what happens to our words now. Here comes our header, it'll come on the page, and there goes our words. Now they're coming in pretty good. Mixed up I probably wouldn't to read a book like that, but you can see the animation working, and we finally got The End going too, but if you'll notice, all of the words are together. They're no longer broken up, and that's because the letters no longer have divs behind them. So this is all pretty cool. We're going to do two things here. After this book ends we actually want to explode that word, The End, because the book is not going to stop there, it's going to continue to go, so how do we do that? Also, we want to make those words come on the page like you would really read them, okay, so let's go fix all of that. So we're in the code, and in the words we just basically are going to take out this rotationX, and we just want the words to come on there from opacity of 0 and come up, and we'll probably want them to come in just a tad bit slower, okay, so you can read them. The next thing is to get these to explode in sequence. Now the problem gets to be is that how do you get them to go everywhere? Well, the next thing I personally like to do is I'm going to put it up here at the top. We need to get the size of the screen, so the letters go flying everywhere, and the way we do that is we type var, and we're just going to do windowHeight is equal to window.innerHeight, okay? Now this is not SplitText at all, this is just JavaScript. WindowWidth, and that's equal to window.innerWidth. Okay, so now we have both those variables, and we have the width and the height that the window is stored in here. With these two variables up here at the top we can now go down here and try making our words, The End, explode. There's a couple things we need to do here, the first one being, we need to know when this last animation is done, and that's the endChars, and what we're going to do is they actually have something called onComplete, and then I'm going to call a function as soon as that's done. So I'm going to say bookEnd. Okay, so as soon as this is done we're going to call this function that we're going to write, bookEnd, and inside of bookEnd there's something that we're going to do. One, we're just going to write a function called masterTimeline.add, and then call explodingText, and that's a method. Okay, now we don't have that yet, but we are going to write it, so as soon as this one gets done running we're actually going to then call this method or this function called explodingText. Let's write that one. So we're going to call this function, explodingText. Okay, now we're in here. Now there's a few things we're going to do. We're going to create a timeline just like we did above, and it's a new TimelineLite. Nothing goes in there, okay. The next thing we're going to do is actually start creating a random number. Okay, so in this case a random number is x and y, okay, so we're going to create a variable called newX, and it's going to be equal to Math.floor, okay, and inside of there we want to do a Math.random, and we're going to take that times the windowWidth that we had upstairs. Now the reason we're using width, in case you didn't know, X is horizontal, which is the same way as width. Okay, now we need to take this little bit of code right here, and we need to get a mix between positive and negative numbers. Now I'm not going to go into total depth here okay, on what we're doing, but we're just trying to do some calculation here on making sure that we can get a random number every other time, so we're just going to put there is equal to 1, and -1 right there. So that's our equation right here. We're going to grab that. I'm just going to copy this, push it down here, and we need a newY, and instead of windowWidth we're going to do windowHeight, and again Y is vertical, and that's why it's height. We then need to change newX in this one to represent the newY, so in these two we get a random number with the browser height and width, then we also get a newY. So now comes the fun of getting this to work. We're going to use jQueries each statement to run through our array of letters that we have in The End, and that is basically endChars, okay. Then we're going to write an anonymous function here, and inside you have index, and then you have element. Now I'm just using element here because I know my letters are wrapped in divs, that's the reason why I'm calling it. Okay, now I made a mistake by putting these numbers outside. Actually, every time we loop through we need to get a newX, so let's do that inside of that loop. Okay, so pay attention to that. That was just some logical thinking. Every time the loop happens a new number needs to be generated, so that's why I moved that into that loop. Now we need to create our animation, so we're going to say, tl.to, and we need the selector, which is element, and we're going to do a .8 for the length, generic object here, and we're going to add some properties. We're going to change the x, and that's going to be the newX of course. Change the y, and newY. Okay, we're going to scale each letter, so it looks like it's getting bigger, and we can change that to 25. We're also going to change the opacity, so as it's flying across the stage it will just get less, and looks like they're disappearing, and we're going to rotate them, so rotation is 180, and you can even change it to 360 if you want to or maybe we just mix it up. RotationY, and then this one let's say is 200. Now you can do a lot of other stuff like color changes and all that, but here comes the little piece of information that you need, and that is if you remember up here, this staggerFrom takes this number at the end and adds that delay, so it's .1, and then .2, and then .3, and that's the delay of each letter. Well down here, since we're looping through, if we just put .1 all of them will run at once because they're all delayed .1, but we need to increment that, and the way you do that is we're going to take index, which is now looping through, so it's 0, 1, 2, 3, 4 as we loop through there. We're going to take index * .1, and that way every time it runs through there it actually takes 1*.1, 2*.1, and so it increases every single time. The final thing we need to do is return this timeline. Okay, so let me add that semicolon. So, as you can see here, what we're doing is, let me copy this and make sure I spell that right. Okay, there we go. So when the end comes on the book it's then going to call a method called bookEnd. This bookEnd is going to add all of these timelines that we created to the masterTimeline, and then run through them, and then it should explode if we do this right. Now again, if you want it to wait for just a second you could then put in a delay right here if you wanted to okay, but we're just going to let it run, and see what happens. So we come over here, and there's our book. As soon as I hit that everything will disappear like normal, okay, and then when you start seeing the header come on, and of course the paragraphs. It's important to understand again, that bringing them in there, everything's surrounded by a div, which is really nice, and in this scenario we could scale these words, we could put colors to them every time they go through one. It's really neat of all the things that you could do if you really wanted to. So as this finishes up you'll see the words, The End, come on, and then they should explode right off the bat. Okay, so maybe the book wasn't finished. Either way, I just wanted to show you a way that we could control more than just those coming on the screen. I hope you liked this SplitText utility that GreenSock's given us. You can do a lot with it, and at the end of this course you'll start seeing a lot more things come together inside of this book. SplitText Summary In this module we got to understand what SplitText utility was actually doing, and what kind of application we could make. So we made basically a children's book, and had the words slowly come onto the page at the very end. This is a great application for that use, but there's other applications too. For instance, accessibility applications to stress words, to stress phrases or letters. This would be perfect for those. We got to understand what the importance of wrapping the letters and words and lines and divs, what that does to our applications. For instance, when the words started breaking apart, and there was letters left on one line. We understood what was happening because we understood there were divs wrapped around those, and we could fix that very easily. We nested a timeline, which we've done before, but it was pretty interesting the way we did it this time because we did it in a loop, and injected that into a master timeline, which was very interesting, and sequencing the tweens in a timeline makes everything so much easier. You can see just by the way we did that, we didn't have to worry about the delays or how to add them together, we just put them in that timeline, and they sequenced perfectly. It was great animation. So what's up next? Morphing SVGs and Drawing SVGs. So let's go get that started. Using the MorphSVG and DrawSVG Plugin Introduction In this module we're going to be talking about the MorphSVG plugin and the DrawSVG plugin, so what does that actually mean? Well, the MorphSVG we're going to be talking about how to set up your SVG because that's very important. If you don't have it set up right or you don't understand the SVG code it can get quite complex and ruin your project. Next thing we're going to do is learn how to add classes to the SVG, so we can manipulate those, and actually start morphing your SVGs the way we want them to. We're going to learn about some MorphSVG basics, which basically are the fundamentals of how to set things up so you can morph one object into another object, and those are the very basics. You can do a lot more with this too. We're going to learn how to turn a rectangle, a circle, ellipse, and anything else like that into paths. GreenSock cannot animate the rectangle and circles, but they can take that SVG and turn those into paths, so we can animate those. The last thing, we're going to be creating a path for SVG to follow. Now this uses the Bezier plugin, but this is a very cool thing to do with the MorphSVG, and that's how to actually get something to follow a path, which I think is pretty creative when you're doing any kind of like road animations. If you want a car to drive a certain path this would be perfect for that scenario. Now we're also going to be taking a look at DrawSVG. Now what is DrawSVG? Well it animates the stroke of an SVG that we've had on the stage. It does not animate the fill, so that's something to understand too, and that's why we're going to talk about how to set up your SVG. Again, it's very important to take a look at this. Understanding your SVG code is very important. The last thing we're going to do in the demo part is drawing the stroke on the SVG. Now this is going to be very cool. You can start at both ends and move them to the middle, start at one end, move it all the way around, it's just very neat how GreenSock has done a great job about letting us control that stroke of that SVG. Setting up MorphSVG Now let's talk about the demo just a little bit. The demo is going to talk about Adobe Illustrator. Now you can use any kind of illustrator or SVG creator that you want, there's a lot of free ones out there, but I'm just going to be using Adobe Illustrator because it's easy to get the SVG out of for me. We're going to look at the SVG project, and set the styles. So we're going to add the SVG, all of that code, and I'm going to show you how to add basically the classes, and then style those classes to turn things off and on. Next, we're going to morph the SVG, and show you how to create, in our case, we're going to turn a bush into a tree, which is really pretty cool, and then last, but not least, we're going to create a new HTML file, and then draw an SVG in that file, so you can control the stroke. Now this is just going to be a very generic HTML file to draw the SVG, but I just want to show you the basics of how to do it. So let's get started in our project and see what we can do. In this video we're going to take a look at the Adobe Illustrator file in which we're going to get the SVG code out of. Now this Illustrator file is in the demos folder, and there's also the SVG code in case that you don't have Illustrator or any other tool to do SVG, but if you do I want to show you the process of how to get that out. So here is our chin moss that goes with our story that we did in the last module, and we have, let me show you how this is made up. I'm going to hit the Layers down here in the bottom, We have a bush that looks just like this. It's just a hump of like a bush grass. Let's take a look at this when we open it up. You'll notice that we have a path, and this path is basically just a gradient on top of it, that's it. You'll notice next that we have this just a rectangle that has a brown gradient. Now this is going to play a major role. It doesn't do anything for this bush at all, but later when we morph it, it will make a big difference. Let's take a look at our tree. The tree is made up almost identical to that. We have a tree part, which is the top, and we have the path for the trunk. Now if you make this on your own there are some reasons why you need to have like, for instance, this trunk underneath the top of the tree a little bit, okay. Don't mix those up, okay, because it'll make a big difference when they morph later. So that's basically the makeup of our SVG file or our Illustrator file. Now how do we get the SVG out of that? First off, we go up here to file, and we go to Save As. Once you do this, in the format area you want to go down to SVG. Do not use SVG Compressed, use SVG. When you do this you can hit Save. Now I've already done this before, so it's going to ask me to replace it. I'm just going to say Replace, and it's going to open up this nice little window here, and all we need to do is hit the SVG Code. Don't change anything else. Now from inside this code whatever your default text editor is is going to pull this up, and for me, this isn't my default, but it always pulls up text edit on a Mac. I want to grab everything that starts with this SVG. I'm just going to go down and copy it. Now this is just the tag element here, so you'll see that we're at the SVG. We go up here to the top, we've left off those top two lines, that's it, and I want to copy that. Now this file is saved in the demos as well. It's called chinmoss.svg. I'm just going to show you that real quick, and that's opened up here in Sublime Text, and it's basically just the code that I had. Now it's definitely color coded, so that's nice to look at and view, but we're going to go over and place this in our code editor in just a second. Now I just want to take a brief look at this. Just make sure you have the SVG with the opening caret, and then the SVG with the closing caret. That is very important that you copied all of that code. If you didn't out of Illustrator, just go ahead and open up this SVG file that's in the demos, and copy everything. Just Command or Ctrl+A, and then Command or Ctrl, whichever device you're on, C, and that will copy it all. Now let's go to PHPStorm, and put this into our project, and then clean it up just a little bit. You'll notice that when you go into the index we've made a few changes inside of the project. One is we added pageOne with another class of pages, and this is our story that was on the left page that we worked on in the last module. We've added a new page, pageTwo, that's on the right hand side to the same class of pages, and now we have an svgHolder, and this is going to be where we place the SVG code that we just had. We've also added another div with the class of bushWords down here at the bottom, and that's going to wrap around that tree and bush here on our page. So where do we place this code? What you want to do is just go right after the svgHolder, hit Enter, and then just paste all that SVG code. Don't do anything yet. We're going to clean this up just a little bit. So now we don't need the version, we don't need all this extra stuff on the top. We don't even need this x and y that's here. We're going to get rid of all that. Now we do need the viewBox, I want you to leave that there, and we do not need this style right here at the end either. You don't need the XML space preserve, you can get rid of that. So basically, the only thing that you need to have left is this SVG with the viewBox of 0 0, and then 296.2, and then the 304.3, okay. That's the width and the height, the last two, these are the x and the y, and those are basically, this is the viewport basically for our SVG. Now you can style that however, and we're going to take a look at that. So I'm going to go to my styles sheet, and you're going to notice I made a few changes over here. For one, I made the svg element the width of 100% and the height of 100%, and remember, that's the height and the width of the parent that it's in. So up here we had one called svgHolder, and you'll notice that we have a height of 150 and a width of 150, okay, and we're floating at left, so this SVG is going to be basically 100% of a 150, height is 150. We've also done some things down here at the bottom that set the opacity to 0, and that's to the bush and the bush-trunk. Now we have not set those classes yet, but I just want to take a look at this CSS, so you know what it says, so nothing is hidden from you. Let's take a look at our project up to this point and see what we have done. As we come into our project you can see that the words are on the left hand side, and we now have words on the right hand side, along with our chin moss SVG, and it's set to 150 by 150, which is exactly what we want. Now if you remember at the bottom of the left hand side there were some words there that said, The End. In the last module we blew them off the page, okay. You're still going to see the same thing, but I don't want to refresh this yet because the words are still going to build onto the page very slowly, like what we had last time. I want to speed that up a little bit because in development we don't want to waste our time with that that we've already done, so we're going to speed that up, just to get to the point where we start morphing that SVG. Let's go over, speed this up, then take a look at our project. So we're back in our project. I want to go to our app.js file, and you'll notice that I added this bushText in here, and we split it just like what we did in the last module. Then I used TweenMax.set, and I'm going to set all those words to an opacity of 0, okay, that's all I'm doing, so I'm splitting them first, and then setting the opacity to 0. If you try to set the opacity to 0 in the CSS they stay hidden the entire time. I just want you to notice that, and why I set that up that way. Now something else that we need to do is we're going to set all of these staggerFroms right here, we're going to set that delay of 0.01, okay, and that's all we want to do on that one, and we want to come down here, and set this one to 0.01, okay, right there, and then let's change this to .5, just so it moves a little bit quicker, and we'll change this one to .5 as well. Now the only other thing that we need to do here is change this middle one, and we'll go ahead and change this middle one to 0.01 as well, and now everything will move very fast onto the page. Now we're not really worried about these bushWords down here because this is the exploding end text, but you'll see where we're going to leave this off, so we can move to the next video, and then get everything morphing. So here we are. We're in our browser. I'm going to refresh this, and now you'll see all the words go onto the page extremely fast. So they'll come flying on the page, come down, the end pops up and blows up, and you'll see the other words, and that's exactly the way we want that. Our SVG hasn't done anything yet because we haven't morphed it yet, and we're getting ready to do that in our next video. We had to get everything set up, so we can start adding classes, so we can then start morphing our tree and our bush. Let's move to the next video, and get those things morphing right now. Morphing SVG Illustrations Now that we have our SVG set up and ready to go, let's get our SVG morphing into different shapes. Let's go to our code, and see what we need to do. Now I'm in my app.js file. I want to say that we're going to put all of our programming in this bookEnd function just because we want to make everything happen in sequence, and this is going to be after the exploding text. Now for development purposes you may want to comment this line out, so we don't have to wait on it to explode. Now this next line brings the bushWords in on the right hand side of the page. We're going to leave that there for now. The next thing we need to make sure is that we import the MorphSVG plugin. Go to your index page, and down here at the bottom after your TweenMax let's go ahead and bring that in. Now I just had a code snippet for PHPStorm. If you don't have that you have to type out the whole script. So I'm just going to put lib/gsap, and then plugins here, and then MorphSVG, and that's it. Your plugin will not work, so make sure you put that in there. Now since we're in the index I want to point out a few things. One is I'm going to minimize these group elements here real quick, okay, and you'll notice that we have the end of our SVG here, and then you'll notice that we have a group id of Tree, and a group id with Bush. If you remember in our Illustrator file we named our layers Tree and Bush, so if you name the layers they will give them an id in your SVG code, which is very cool, okay. Now let's just say that we want to morph this id into the bush or vice versa, for instance, the bush into the tree. How do we do that? Go to your app.js. Below the bushWords here I'm going to go ahead and make my masterTimeline, and I'm going to set it to to. Then I'm going to give it the idea of what we want it to morph. Okay, so here we want the id of Bush, okay, give it a time, which normally is 1 for us. Then what do we want it to morph into? So I'm just going to do morphSVG, and then we want it to morph into the tree, and these are just the ids, that's all they are. Let's go to our browser and see what happens. We are in our browser. I'm going to refresh this real quick. You're going to see the words come onto the page, and you're going to notice that nothing happened from our bush to our tree. Why is that? I'm going to right-click on our page, and I'm going to go to the Inspector, and I'm going to go to the Console, and you're going to notice that it says Warning, cannot morph a group SVG element. So I want to show you that this error, don't panic at this. All this is basically saying is that we cannot morph that entire group element. That's not a problem. We can still get things to move, okay. Let's jump over to our code, and I'll show you. So here we are in our project. I'm going to go to the Index page, and you'll notice that the tree is a gigantic group of paths, but we can still animate the paths. We can't animate the group, but we can animate the paths that are inside of it, and the paths are basically what makes up our SVG. Now, in our case, the top one, if you remember how things are rendered onto an HTML page, is that as it's reading down through your code it's going to render the bottom elements first, and in our case, this one is going to be the trunk of the tree, okay. So we're just going to give this a class of trunk. Now, before I forget, I went to the CSS page, and I've commented out our opacity and the hidden, just so we could see the tree, and the trunk of the tree, and the bush. Those are all showing right now. We did that in the last video, but I wanted to point that out again. Going back to the index, now we have the trunk. Now this next path is going to be the top of the tree, and we're just going to call this tree. Now you'll notice that I put these in the paths, trunk and the tree. This trunk gets rendered first, then the top of the tree gets rendered second. Now with that same principle we're going to go down here to the bush, which basically means that we don't see a path here, but we see a rectangle, and this rectangle was the trunk of that bush, and this trunk is going to get morphed into the trunk of the tree. Now we're going to give this a class, and in this class we are actually just going to call this bush-trunk, just like that, and in this path down here we're just going to call this the bush because that is the big, green bush. So now we have our classes set up. Now if you remember when I said you cannot morph a group, but you can morph a path. You cannot morph a rectangle or an ellipse or a circle. You cannot do that, but I'm just going to show you what we have right now, and I'll show you how we can morph those rectangles or anything else, and GreenSock's done a great job of doing this and helping us do this. I'm going to save this. I'm going to go to our app.js file, and let's change this Bush into the class of bush, and change this tree into the class of tree, and you'll remember those are just the paths now. Let's see what happens in our project. So in our project you'll see the words come on in the page, and you'll notice that after a few seconds our bush morphs into the top of the tree. Now you'll notice that trunk of the bush stayed there, and that's because, one, we didn't try to morph it, but two, you cannot morph a rectangle, so how do we fix that issue? Let's jump over to our code, and I'll show you what GreenSock's done to fix that. Now if we morph the trunks of the tree that's not a big deal. I'm going to duplicate this, and all we have to do here is we're going to morph the bush trunk into basically just the trunk of the tree, so here we have morphed the bush into the tree, which is the two green sections, and down here we're going to morph the bush-trunk into the tree trunk. That's what these two lines are doing, but I can't do that because the trunk of the bush is a rectangle. That's not a problem. So what GreenSock's done for us is it will actually go through that whole SVG for us to convert any rectangle, circle, ellipse or anything like that into a path. Now it will not convert those groups into a path, so don't even try that, but it will do the rectangles, and how do we do that? We're going to go up here to the top, and then we're going to do this right off the bat. Type MorphSVGPlugin.convertToPath, and then you just have to tell it what you want it to convert to path, and in our case, we want to convert this rectangle. Now you can do circles or ellipse or anything like that, but in our case, we only have one rectangle. So again MorphSVG, convertToPath, and now we should be able to convert this trunk into the tree trunk. Let's see what happens. I'm going to refresh this page, and after the words build on you should see the bush and the trunk change into that tree and the tree trunk. Now let's inspect it and see what happens. Here we have the book. Inside the book we have pageOne and pageTwo. We're going to go inside of pageTwo. Here we have svgHolder, okay. In SVG we have to the tree and the bush. Remember, that trunk was in the bush. So now we're going to come down here, and look what it did. Here's the bush-trunk. It changed that rectangle into a path for us, which is awesome because now we can animate that or morph it. So again, the only way you're going to see that is if you go in and inspect it and look at the elements. Don't look at the source code, you have to inspect it. So let's close this out. Now let's finish this off and make the tree not show. So I'm back in my project. I'm going to go to the CSS page. Okay, I'm going to uncomment the opacity and the hidden. Now you'll notice that I'm changing the tree and the tree trunk to hidden because I do not want them there at all, but I want the bush to stay there, and I want them to be set at an opacity of 0, okay when it first starts because I don't want to see them at all. Go to our app.js, and then in our bookEnd before the bush words come on we can actually set those, so we're going to do masterTimeline.to, and all we're going to do here is we're just going to turn on the bush, and in the bush trunk. Now the first thing is the bush, which is the green part, and we're going to turn that on in like a half a second, and what do we want to change? We want the opacity, and we're going to change that to one. Now remember that we had set those to 0 in the style sheet. I'm just going to duplicate this because now we just want to do the bush-trunk, and we really don't care when this one comes on, the bush-trunk, because remember, it's layered behind that bush, so the bush is going to come on, then the bush-trunk, which is fine, and then the words are going to come onto the page, and then we're going to morph all of that, and because we turned the tree to visibility of hidden you won't see the tree at all, but it still knows that they're there, and that's why we can morph those. Let's see what happened in our project. Here we are. Again, when I refresh this you're not going to see the tree at all. So you don't get to see anything. Now after the words come onto the page you're going to see the tree come on or the bush, and you're going to see the words start to come on, and then our bush morphs into that tree, which is very cool. Let's look at that one more time. Again, you see nothing, and because we changed the opacity the bush comes on, and now it morphs into the tree when we want it to, and that's because we added those all to that timeline, which is very, very cool, and it controls how we want the page to flow. So here's a good use of MorphSVG in a kids book to morph the elements. I think this is very cool. Now then next we're going to look at how to basically draw an SVG. Using the DrawSVG Plugin Now that you know how to use MorphSVG, let's take a look at DrawSVG. So in our Illustrator file it's set up very similar. Let's take a look at this. So we're in our Illustrator file, and all I did was type a word out and put a stroke on it, then change the text to outlines. Then I ungrouped them and actually named each layer. Then, just like the previous video, we went up to Save As, then we changed this to SVG, and hit Save, and then you go get the SVG code, so here it is. You can copy all of this, and if you don't have Illustrator or any tool I've also saved the SVG in a file in the demos. The Illustrator file is awesome in the demos if you would like to take a look at that as well. So now that we have the SVG code we're going to do the same thing as we did in the previous video, and go clean it up and put it in our project. Let's take a look at our project. So here's our project. It's very simple this time, and I also want to point out that in the head I have my style sheet because the only thing I did was change the background color, and then centered the wrapper on the page, and that has our SVG. I'm going to minimize the head here. You'll notice that our wrapper basically just contains our SVG. I've cleaned up the SVG, just like what we did in the previous video, and the only thing that we have is the viewBox. Then if you look at the rest of this you'll notice that we have paths, and each path has an id, and the id is basically there from what we named the layer. So I'm going to minimize this SVG. I've also brought in TweenMax from our GreenSock, and I've brought in the plugin DrawSVG. Now we're ready to go. Now I wanted just to briefly do this, just so you can see what DrawSVG does. Now I've already typed all of some examples out, but now I'm just going to uncomment them, so we can see them very quickly. Let's look at what our project does or what it looks like just from the beginning. Now you'll notice that we just have the gsap on a black background, and that's exactly what we want. Now what DrawSVG will do is it will actually animate the stroke of this SVG letter, and it's very cool because there's different ways that we can do this. The first thing we're going to do is take a look at animating this stroke to 50%. Let's go take a look. So we're back here in the project, and I've uncommented this first line, and we're going to actually animate the stroke on the letter G. Now we're going to assume, take out 2 letters here, if you only put in 1 value it assumes that the first one is set to 0, so now we're going to animate this stroke, the back part of it, 50% of the letter. I've done this at 5 seconds, so it's going to take a little while to draw, but you'll see what I'm talking about how it moves. Let's look and see what happens setting this at 50%. I'm going to refresh this page. Now you'll notice that it starts at the beginning, starts at 0, and it actually animates this to 50% of the letter, which is very cool. So again, it starts off, because you only have 1 value, it assumes it starts at 0, and animates it to 50%, but what happens if you put in 2 values? Well now I'm going to put in 20% as the first value and 50% as the second value. Now we're going to see where that actually goes. Now you'll notice I'm here, the letter's still left over from the last time. Let's refresh this, and you'll notice that the back, the end goes down 20%, and the other where, you know, the beginning again, goes to 60%. Now knowing where the beginning and end are is very important. So the beginning for ours starts up here at the top, and goes to the right, and comes down. The end actually comes around, so when we looked at that code, when we put 20% that was the starting stroke, and that's why it only does 20% to here, and the second value is the end, which actually comes around and draws that way. Now this is when you used two values. If you put 100% in it actually just draws the line to 100%. It won't show any kind of movement at all. Now that's using the to animation. Of course, if you do from, and you go to 0 it's going to start basically at 100% and go to 0, so it will actually draw the letter on the stage, but let's look at some other cool features that you can do. One of my favorite is the fromTo. I'm going to uncomment this, and we're going to do this to the S, and I want to comment out the G, so that doesn't get confusing. Now one thing about the from and to is you need the first from, and then you need to go where it's to, and we've actually added a bounce in here for an ease, and this'll really add a lot of character to this letter. So basically, we're starting at 0, and we're going to animate that line to 5%, so you're going to get a very small segment of this letter, and then we're going to take that segment, and then we're going to move it to, let's do 95 here, and because I want to keep the 5% increment. So we're going to animate it to 95% and 100% of that letter, and we're going to add a little bounce in. So let's see what I'm talking about and what it looks like. I'm going to refresh this page. The G will come back, and you'll notice that the S will be in a very small segment and then go around itself. Now it's doing that because we had the bounce in there, so if you put a different bounce in it would do something different, but let's take a look at that again. That's 5% of the line segment, so it's actually drawing around, and because it goes from 5%, 0 to 5%, and then to 95 and 100 we can actually make a little segment move around the line. There's a lot of different ways that you can do this, but this is just one little cool way to trace that letter, and afterwards you can do an on complete function or do anything else, and then draw the actual letter on permanently, so you can make that look like it goes around a bunch or you can make it yo-yo. So what is yoyo? If you've watched the first GreenSock course that I did it will talk all about that. SO yoyo is basically a way to make it go back and forth, so we're going to put first repeat, and we're just going to put once, and then we're going to put yoyo is true, and then that means that it's going to go one way and then reverse and come back. Let's see what happens here. We'll refresh this, and you'll see it do the same thing we just saw, but then it's also going to reverse from that. So you saw it start off at the beginning like we saw with the bounce, go all the way to the end, and then came back. Now you could do this for a long time, and you can make it speed up or do whatever as it goes along, but it's just a cool way to move the letters. Now back in our code you can also do a staggerTo. Now, if you remember, staggerTo basically takes all these letters, and we can add a delay in between each one. Now we're going to draw all of them on like we did on here, except for we're going to leave them at 60% drawn onto the letter. Let's actually watch and see what happens here. I need to remove this tween, okay, and we're just going to go test it. So with a quick refresh you'll now see that all the letters start off on those little segments, and they'll draw, and then they stay drawn at 60% of the letter. Now 60% of the A and P is a little different because they also have that small little section inside of them that's being counted as part of the stroke, but this is a very cool feature to have, this DrawSVG, and can do a lot of things. I'm just using it on text right now, but you can use it on any kind of characters or logos or anything like that. I encourage you to check it out. Now let's go learn how to make an object follow a path. Animate Your SVG on a Path Now that we know what DrawSVG does and MorphSVG does, let's look at what else MorphSVG has in store for us using the Bezier plugin. So here's our project, and it's very simple. We just have a wrapper, and I'm just using that to center this SVG that we're going to paste in there. Our style sheet is still basically the same. We have our basic reset, our wrapper, and it's just going to display flex to center this SVG, and then of course our app.js, which is empty right now, and that's where we're going to put all of our JavaScript code or our GreenSock code to make this car tween. Now we're going to get our SVG from Adobe Illustrator. If you don't have Illustrator or you need the Illustrator file it will be in our demos folder in a folder called FollowPath. I also put the SVG code in there, just in case you don't have any kind of Illustrator or any tool to get the SVG code, so you can just copy it right out of there. Let's look at our Illustrator file right now. So just like the earlier videos in this module, if we open up the layers you're going to notice that we named the path, and we named the car. It's very similar to everything we've talked about throughout this module, so just make sure that you name those. Now let's get the code. If you go to File, Save As, and make sure you change the format to SVG, and then just hit Save. Then when you get to the SVG Options window hit SVG code, and this is going to be pretty long because that car has a lot of different paths, so just copy all of this. So I hit Command or Ctrl+A, whichever OS you're on, and then hit Command or Ctrl+C to copy it. Once you do that go ahead and close that window, and cancel this. Now you're done with Illustrator. Let's go to our code, and paste that SVG. Now that we're in our project let's go to our index page, and paste this SVG code right here in between that wrapper. Now if you remember during the MorphSVG video we talked about how it couldn't do anything with a group, and the same thing applies here with this path to data, so we're going to go ahead and add a class name to this, and I'm going to call this class car-path because we're going to get that car to follow that path. Now once you have that, go ahead and minimize that path if you can, just to take up less room, and then go ahead and minimize this group up here, which is the car, okay. Now we can leave the car as an id. We're going to move that whole group together because we're not trying to transform or do anything with that path data. Go ahead and minimize this style to save room, and now that we can actually see the top of this, let's clean it up a little bit. So I'm going to get rid of those two lines of code to just to leave our SVG. I want to take this viewBox right here, and move it up here, and I'm going to get rid of all the rest of this, and basically just leave that viewBox. So now you just have SVG, and then you have viewBox, and then you have all the rest of your code. Very simple. Don't forget you need to import your TweenMax, BezierPlugin, MorphSVGPlugin. This will not be included in your project, as you need to become a member for GreenSock. now let's go over and take a look at what this looks like in our browser. This is a very simple idea here, but you can do anything. You can make these paths go in circles, you can make an airplane fly around, you can make a balloon go up, anything you want, a marble going down a puzzle or something like that. This is just a very simple way to show it, and I'm going to get this car to go along this path, so let's see how that operates. Back here in my HTML I'm going to jump over to app.js, and I'm going to get our JavaScript file set up. The first thing we need to do is find that path, so we're going to store that in a variable, and we're going to call this carPath, and it's going to be equal to a MorphSVGPlugin.pathDataToBezier. That's all you need. Now we need to pass it the path, and in our case, we named it car-path, and it's a class that's why you see the period, okay, and that's all you need. That's all we needed to do right there. Now I want to show you one thing. I'm going to make a console.log, and we're going to check out and see what this car-path actually shows us. I think it's very important to know what that's actually doing. Let's go over to our browser and open up our developer tools. So in our browser you'll notice that if we open up our developer tools, which is Command+Option+J or Ctrl+Alt+J, you can pull this up and open up Console. I'm going to hit Refresh, and now you'll notice we have an array of objects, and if you look at that array you'll notice that each object has an x and y inside of it, and you'll notice that this is 202.4 and 73.2, and as we go through here you'll start noticing that they change, and they're basically going along this path, and putting points in, and that's going to help this car go across this path. I think that's very cool that it does that. So that's what our pathDataToBezier did for us. Now let's get this car to actually move. Now that we have this up here we're going to just write a basic tween, and you can actually create a timeline if you would like to, and get this to work, but we're just going to stick with this basic tween, and here we're going to tween the car, which is an id, okay, it's that whole group if you remember correctly, and we're going to do this in about 2 seconds, and we're going to actually delay it 1 second, and we need to actually call the Bezier and create a generic object here, and actually that has a colon after it. Okay, there we go, and then we need to put in the values. Now basically the values here is all of those points that we got, so all the values is carPath. Then the next is type, and you want this to be cubic, and it's very important that you put the type as cubic because that's the values and that's the type of data that we're passing to this Bezier plugin. You have to have that, okay. Now that we have our tween set up let's go take a look and see what happened here. I'm just going to refresh this page, and you'll notice that our car started moving, but it's way off of that line okay, and basically that's because it just jumps down relative to where it's at, and don't forget the anchor point is in the top left hand corner, okay. We need it to get a little bit closer to that line. Let's see what we can do. So at the end of our path we can actually offset. We can write an offsetX, and we can change that. We can say okay, that X needs to go off about -50, and maybe we need to move that car up about 50 as well, so we're going to offset the Y -50, and basically you just move the car back on the horizontal axis and up 50 on the Y axis. Let's see what happens. I'm going to refresh this page, and I want to show you something with this array over here too, and you'll notice the car actually came up a little bit, but let's see what happened to all of our points. If you remember correctly, that used to be 202, and this was 73, and because I took -50 off on the offset it removed it from our X and Y points, so it's taking that car and basically transitioning it relative to where it was, which is really pretty cool that it can do that, but I don't want to spend all day trying to figure out my offset path. GreenSocks helped us out there. I'm going to go ahead and close this console. We won't need that anymore. Let's go over and fix this. So instead of setting an offset value we can put something else in. Now I'm going to leave this here, just so you can see how we did that or if in case you want to change it you can do that as well, but I'm going to just change this to align, and I'm going to pass in what we want to align to the path which, in our case, is the car. So let's just see what happens now that we added this line. Refresh this page, and now you'll notice the car is right along that line, and if we slowed it down just a little bit, I'm just going to refresh this, you'll notice that the top left corner is really what is touching that path. So here's that car, and the top left corner is right there at that point, but we want it to be in the center of that car. That's pretty easy too. Let's check it out. The only thing we need to do to get that car to center is just do TweenMax.set. We're going to just change this car, and we're going to change the xPercent to -50, and the yPercent to -50. So basically what we've done is we've transitioned that anchor point in that top left corner to make it center, so we've taken 50% off of the x, moved it to the middle, and 50% off of the y, and moved it to the middle, basically scooted the car up of the car. That should pretty much get this car to follow along this path. Let's see what happens. I'm going to refresh this page, and you'll notice that the car follows right along that path. Now you can do an offset, so that car doesn't start up here at the top, but you'll notice that the center of that car now follows right along that path. I think this is very cool and very easy to use. You can do a lot of things with this. Getting the airplane or something to move around a path or getting a ball to follow it looks really cool, and you can also make the opacity of this line to 0, and that way the car looks like it's just following along on a road without you seeing the path. I hope this helped you learn more about what you can do with SVGs and GreenSock. Summary To wrap this module up, we learned a lot of different things. We learned how to layout an SVG inside of Illustrator, and looked how we could add classes to that code to add classes to that SVG to morph them or to actually use them in our JavaScript file. We learned how to morph an SVG or, more importantly, what not to morph. For instance, like the groups, you cannot do those. Remember, if you are having trouble morphing groups you need to put those classes on the paths themselves. Speaking of paths, we talked about how we could create paths from rectangles, and ellipse, and circles, and the way GreenSock allows us to do that very easily. We learned how to create nice stroke animations with DrawSVG, and I thought that was really cool because you can really draw letters out and make little sections that look like they're carving out letters. You can do a lot of stuff with that. Along with DrawSVG and MorphSVG, we learned how to basically follow a path using the MorphSVG and the Bezier plugin. All of this is really pretty cool, and I think you can do a lot of things with all of these plugins that we've looked in this module. So what are we going to do next? We're going to wrap everything up. We're going to take everything we've learned throughout this course so far, and build a nice little project to see how it all comes together. Animated Opening for Final Application Introduction In this last module we're going to be bringing everything that we've learned together into one project. So what are we going to be doing in this last module? First of all, we're going to be creating a web banner. I hate to admit it, but I used to create them all the time using Flash, and actually it made me quite a bit of money. We used GreenSock back then. Of course, that was an action script, but now we use HTML, CSS, JavaScript with GreenSock in it. We're going to learn different ways to manipulate SVGs. Now we've done this earlier in the modules, but I've set them up in a different way, so we can see how to move them in different scenarios. We're going to see how a timeline helps us set up this last web banner, and we're also going to talk about how to make all of this fit together in one cohesive project. Setting up the Banner So what's our demo like? The demo is basically going to take a look at the banner itself inside of HTML and CSS, and how to lay those out. I want to make sure you understand how that's laid out, so we can understand how to manipulate everything. We're going to look at the SVGs for the project. I'm going to open up Illustrator, and I'm going to show you how they're laid out, and then we're going to look at, of course, the SVG code, and last, but not least, we're going to program the web banner slides. We're going to get all this together, and show you how easy it is to create a nice smooth project. Let's get going and create this. So now that we know what our demo's going to be like, let's take a look at our project and what our outcome is going to be. So I mentioned that we're going to be creating a web banner, and I want to take this first video to show how everything is set up, and I think it's very important that we understand how they're set up, so you know how everything flows. So this is the last slide of our web banner. I look at web banners as being three slides and they animate in between three slides, and there's also animation while the slide is coming on. Let's take a look at what we're going to be creating. So you'll notice that some text comes on the screen, and we've done that before, and we have images slowly going on. Then they'll be removed, and one'll morph into another SVG. We can see more text coming on, and then we can actually draw the SVG, and then animate some more text to finalize our banner. So nothing too overwhelming, but we've definitely used almost everything that we've created in this course. Let's go over to Illustrator and see how those files are set up before going to our project. So now we're in Illustrator, and you've seen this Illustrator file before. It is the same GSAP that we've drawn before. Nothing new here. We have layers that have all of the letters on them, so and the SVG is actually located in the demos if you want that. Nothing new here. There is, however, a new Illustrator file, dont-panic-html. You'll notice here that we have the HTML 5 logo, and we have this rectangle box that's slightly rotated, and inside there we have some text that says, don't panic. I'm just going to turn this on a little bit, so you can see it. You've got to select that first. So I'm going to turn these letters on here real quick, so you can see them. We'll give them a little bit of color right here, and you can see it just says, don't panic. Okay, I'm going to turn those back to white, so there we go. They're back to normal. Now the SVG code is also in the demos folder. For this it's called dont-panic-html-svg. You can grab it from there. Both the GSAP SVG and that one as well, the code has all the styling classes in there, so if you use that you are going to already have all the styling code in. Just want you to be aware of that. So let's close Illustrator, and move on, and take a look at our project. So we are now in our project, and I have the SVGs closed up, so we can see our entire project sitting there. I just want to go over this real quick. We have a wrapper that's basically the entire stage, 100% wide in height. We have a banner that's 300 by 250 and it's centered. Then we have a couple paragraphs, and I want you to take notice of that I have slideOne here, and then down here I'll have slideTwo, and then, of course, slideThree, and I give those classes so I can turn them off and on and see how they show up, and then I can position them. So that's just one way to do it. Now our style sheet is set up very similar to what we have been doing, a basic reset. We've embedded some fonts that we can use. Then we have our wrapper and our banner that actually centers it, and then here you'll see slideOne. Now I have the visibility turned on, so you can see it, but down here in slideTwo I have it hidden, and slideThree is also hidden, so let's take a look at what basically slideOne is going to look like. So because I have all the other ones turned off this is actually what you're going to see. Now the one tricky part is that I can actually see this HTML 5 logo here. If you remember, in that SVG we actually had the rectangle on the stage. Well I've done something to hide it, and I'll show you that real quick, but here's basically slideOne. Let's jump over to the code, and look at what slideTwo looks like. So I'm going to hide slideOne, and I'm going to unhide slideTwo, and I'm going to go in the HTML, and slideTwo is basically this paragraph, but it also had that rectangle in there. Now one thing I did to hide it was I opened up this SVG, and we'll close this style here real quick, and I just commented out the don't panic rectangle. I'm going to uncomment this, and then I'm going to comment out the HTML, so we can actually see what it looks like. Let's jump to our browser and see what slideTwo looks like. I'm going to refresh this, and what you should see is the don't panic, and the we can help. Now you'll notice the don't panic is down behind the we can help. We're going to fix that when we get into our JavaScript, but it's actually in the same location it was inside of Illustrator file. So this is slideTwo. Let's go over, do the same thing, and see what slideThree looks like. Okay, so I'm going to uncomment this one right here, okay, for right now, and I'm just going to comment out the entire SVG because this will interfere with the last one, okay, and now I'm going to come down here, and slideThree basically has the SVG, okay, which is the GreenSock that we're going to draw on, and then we have two paragraphs. So in my style sheet I'm going to come over here. I'm going to hide slideTwo, and I'm going to basically make slideThree visible. Let's take a look and see what this looks like. Refresh the page, and now you'll see we have GreenSock, and it's a little big, and we're going to fix that, and also the can do, and the GreenSocks URL. Those are all the slides, and that's one reason I like to set it up like that using those classes. So now that we know how the project is set up, let's start getting the styling on the SVG, so we can start animating everything. Adding Styling and Placement So in this video we're going to talk about how the styling is going to work, and get all the classes put in to our SVG, and anywhere else that we need to to get this functioning very well. We're also going to use TweenMax to set a couple properties on our SVGs. So let's take this at the top. All the styling in the CSS is already there. We don't have to do anything with that at all, and you can look at that if you want, but we're just going to add the classes here, and I'm going to talk about why we're adding them, and where we're adding them. Right here on the paragraph, of course you have the wrapper and the banner, but let's talk about the text, and things that are going to be animated. So in slideOne you'll notice that we have a class of slideOne, and then we've added another class, soYou, and I've just basically taken the two words here and added them together, and that is so we can animate them later. One thing I want to do is uncomment this SVG that we've commented out before, and again, if you're using PHPStorm that is just Command or Ctrl forward slash to uncomment or comment. Okay, now we're not going to do anything with this style, so I'm just going to go ahead and close that. So up here in the top in the SVG we're not going to do anything at all with that SVG. We're just going to leave it exactly like that. The style is closed. Now this group, which dp stands for don't panic, okay, so that's the id, we're not going to be doing much with that, but we are going to add a class, and the class I want to add here is we're going to put slideTwo, and then we're going to also add one called dp. Now you're wondering why slideTwo? Isn't this slideOne? Well the way this exported out in SVG, the don't panic and the rectangle part is in slideTwo, not in slideOne. What's in slideOne is the actual HTML logo. Okay, so now that I have that up here in this group, we're going to add another class to this down here, and we're going to call this panic, and that's all we're going to do on that one. The next thing we're going to do in the text area is in this class we're going to put dpText, and that's going to allow us to manipulate the text somehow, and get that animated for us. So we're all done with the don't panic box with the words. The next thing we need to do is move down to the HTML or the logo. Now again, I'm going to add a class, and here we are going to put slideOne, okay, and then I have one called skills, and I want to put five, and that's for HTML 5, and that's for the number on there. We have class, and we have our slideOne. So now that we're adding those we could turn those off and on easily the way we have that now. Now for this polygon in the class I'm going to add htmlLogo. What this is going to end up allowing me to do is animate this or when we morph this SVG it's going to allow me to morph this polygon into something else. Now if you remember me from earlier videos, you cannot morph a polygon, and we'll fix that issue in our app.js. Moving on, we have another class called lightOrange, and that's right here next to this st5, and it's spelled just like that, lightOrange. Then below that we have five right here. I'm going to call this the fiveText, and this is the number five that's on our logo. Okay, now that that's there we're done with that SVG, and you can go ahead and close that up, so we can now see our project. The rest of slideOne basically we have the skills, and these are the images for CSS and JavaScript. Next, we start slideTwo, and if you want to you can go ahead and put, this is slideTwo, just to keep it nice and cleaned up. Now remember, part of slideTwo is in this SVG up here at the top, okay. Now with the word, weCan, we've just added slideTwo, and put weCan on there. SlideThree, we're going to add a couple classes in here. Now you'll notice that I left a class here on slideThree on that SVG. Let's go ahead and open that up a little bit. We would never do anything with the style at all, okay. So now that we have that path down here, let's see what we need to add to that or if we need to do anything at all to get that to change. Now one thing I want to talk about is the styling when you add more than one or two SVGs, and we may see this here in a minute, but you'll notice how every SVG in here has a style. Now, in this case, we have gs0, and that's what's being styled with this color. Okay, so if your SVG is a lot more complex, and you add these style elements in there, you may notice that some of the style gets overwritten, and that may be an issue. Now you'll notice that gs isn't anywhere in here, which is fine, but if there was a gs it would get overridden with the one below that, so just take note of that, so when you're styling your pages you'll understand why it's not styling the way it should. Alright, so now that we have all of this we have slideThree, we have a viewBox, we need to add another class in here, and this is gsap, okay, and then down through these paths we already have an id of G, and this is basically the only thing we need for this SVG. We do not need anything else. So now that we have all those classes, you should be able to go in and turn on and off all of these groups, so that's what I'm going to do. I'm going to come back here, and let's make sure that slideOne is positioned the way we need it. So remember, I'm going up to slideOne, I'm going to turn it on, and make sure slideTwo is hidden, and make sure slideThree is hidden. I'm going to save that, and let's go over and preview what this is going to look like. Here I am in the browser, and we had slideThree up, so I'm just going to refresh this page, and you'll notice we have layout one or slideOne up. This is positioned the way I want to, and if it's not you need to fix this in your CSS. It should automatically style for you, as I've done that for us in the CSS. Let's turn on slideTwo, and see what that looks like. So I'm going to go ahead and leave the visibility on or hidden in slideThree. SlideTwo I want to show it, so comment that out, and slideOne, I want to go ahead and hide it. I want to save this, go back over, and let's see if we can get slideTwo to show up. So now I'm going to refresh this page, and we should see the don't panic and rectangle along with two words at the bottom. Okay, that's exactly what we want, so we've added the classes exactly where we needed to, but we need to adjust this don't panic and we can help. Now the we can help is pretty close to where we need it, but we definitely need to move that don't panic, and the way we're going to do that is we're going to change this in our app.js, so let's go back and just basically update this. So now that we're here we're going to open up our app.js, and I'm just going to do a TweenMax.set, and one thing I'm going to set is that dp. Now remember, it was an id, okay, and what are we going to set? We want to set the y value of this. Now I'll tell you why we're going to set the y value, and how I knew what to change it to. Okay, now the -70 I actually played around with that just a little bit to get it to move, but why did we choose y instead of like top? One of those is because if we come over here and look at this SVG, which don't forget it's up here in this SVG at the top, you'll notice that this rectangle now has a y and an x. That's the reason why I'm changing it. Now you could have changed it here, but I wanted to show you how we could use GreenSock to set that. Now if we go back over and refresh our browser we should see that rectangle move. Refresh the page, and now you see the don't panic jumped up. The we can help is already styled, and we don't need to do anything for that. So we've already got half of this done, we just need to move over to slideThree, and do a couple other things. now that we're over here in our project we're going to go to style, and we're going to turn off slideTwo, and then we're going to turn on slideThree, so just comment that out. Now that we're in slideThree we can actually take a look and see how this set up, and see what else we need to do. I'm going to refresh this page, and you'll notice there's our GreenSock, and because we added a couple extra classes it made that GSAP smaller, and everything is exactly positioned where we need it. Now we're able to set up our project, and start animating everything in, and getting it to look the way we want to. So in the next video that's exactly what we're going to do. Animating Slide One Now that we have our slides set up, there's a few things that we need to set before we can start animating. One is we need to make sure all of our slides are visible, so make sure these are commented out. So slideOne is commented, make sure that's out. Make sure slideTwo is commented out, and the reason why is because we need to make sure that these can be seen when we animate them. We'll take care of going from opacity of 0 and getting them off the stage when we animate them using GreenSock. Now let's jump to the browser, and take a look at all three of these slides showing at one time. As you can see here, you pretty much see everything in every slide. The first slide consists of, so you want, and these three logos on the side, so we're going to animate those words on slowly, and then as they're animating on we're going to animate those three logos on at the same time. To animate the words we're going to use SplitText, which we used in a couple modules back. To animate the logos on that's just a simple to, Tween, and GreenSock to animate those on. In order to move from the slideOne to slideTwo we're going to morph the HTML 5 logo into the rectangle, and of course, that's more for SVG, and we used this in the last module. We're going to animate the don't panic text on, and slowly animate the other words on slideTwo. Now in order to go from slideTwo to Three, we're just going to animate all the words off, make the rectangle and stuff just disappear, and then we're going to draw the GSAP, and that's the DrawSVG part of it. Then we're going to bring on the words normally using SplitText. That's the animation for all of these slides. Let's get going and see how all this fits together. So I'm back in my project, and I'm going to jump to the app.js. Now there's one more thing that I want to set here, and I'm going to set this TweenMax, and I'm going to set the panic class, and what this panic class was, it was actually the rectangle, that orange rectangle around don't panic, and the reason why we're changing that, we're going to just set the opacity on that to 0. We don't want it to be shown at any time when this starts up, and we'll turn that on when we want to. So we're going to set that to 0, and that's all you need to do right now. I told you we're going to be using SplitText in order to control the words. So if you remember correctly, in order to SplitText we need to create a variable, and the first one was soYou, so I'm just going to call it soYouText, and that's going to be equal to a new SplitText, and then we have our selector, and this one is going to be slideOne., slideOne. and then soYou, which is the next class, and then what do we want to split? What do we want to divide it up into? Well, we could just put type, and we could just leave it words if we wanted to, but just in case we want to do some different animation I'm going to go ahead and bust it up into the characters, and that's all we need for this one. Then we need to actually get the arrays for the words and the characters, so to do that we're just going to put soYouWords, and that's going to be equal to the soYouText.words, and pretty much just soYouChars, which is characters, and then soYouText.chars. Now we have all of the text, words and characters, from that first slide's soYouText. We're also going to grab the characters from weCan, which is the we can help you, okay, so we're just going to call this weCan, and we're going to split this up into just like we did up above, weCanText new SplitText. Then we need to call the selector, weCan. Then we need to pass in the types. Again, just in case we want to do something else with the words or the characters, we're just going to get both of them. Okay, I'm putting a comma there, just so we can add some more variables without ending, and I like the way they align over here on the left hand side. So I'm going to put weCanWords just like above, then we have that array, and we can do weCanChars, weCanText.chars. So now you have the characters, and you have the words. Let's start getting some other stuff wrapped up. Now that we have that we're going to go ahead and create a timeline, so we're going to call this masterTimeline, and it's equal to a new TimelineLite. Automatically, we're going to delay this by 2 seconds. Now that we have our timeline we can start adding the animations to it, and that way it will sequence the way we want it to. So we're going to go ahead and object masterTimeline. I want to staggerFrom. Then we're going to put the selectors in there. The first one is slideOne, soYou, we don't need this string around there, so we're just going to do soYouWords, okay, because we're going to animate all of those words. We're going to do it in 1 second, and what do we want to animate? We want to move the y value of this, -20, for each word, and then we're going to bring it in from opacity of 0 to an opacity of 1, so don't forget about the from. It's going to go from 0 to what it is right now, which is 1. Then we want to stagger those, .25. So if we just take a look at this right now, just to show you what it's doing, we're going to see those first texts in the background moving a little bit. They're going to start off the screen on opacity of 0. Refresh, and let's see what happens to the words in in the back here. Now you'll notice they're gone, and then all of the sudden they start animating onto the stream. Okay, that's exactly the way we want to. So that's the way that SplitText is going to work when we stagger them on. Let's go ahead and wrap up that first slide, and start moving to the second. So now that we have that, it's easy to do the next few things. I'm going to just go to the next line, and we're going to use masterTimeline, and on this one we're going to staggerFrom again, and we're going to call out a few here. We're going to pass in a variety of objects, and the first one is going to be the skills, which is, by the way, a class, and we want the logo of five. Okay? Then we want the skills, don't forget to put the period there, and we want CSS, which is the CSS logo. Then, of course, we want the skills.js logo. Okay, so now that we have that we can go outside there, and put how many seconds, which is 1, and what do we want to do? We only want to bring those from opacity of 0. Now I do want to do a couple things here. I want to stagger them 5 seconds. Then I also want to set them at the 5 second point. So what you're going to see by setting this .5 on the end here is the fact that now this animation of all the logos will happen just a tad bit sooner, so as these words are animating on the screen these will start coming on as well. So you can control a little bit of how these get staggered onto the stage. Now that we have that, let's get the words off the stage. So I'm going to copy this line right here, and I'm going to paste it down here at the bottom because all we're doing is animating this, but here we just want to take it, and we want to staggerTo, so we already went from, but now we need to go to, and then take those to an opacity of 0. Now we don't need to do anything with the Y here. We just need them to move up and go to 0. Now you can leave it to Y if you would like, that's up to you. So let's just see what happens if we leave it the -20. Then here we're going to set it to a .05, and stagger those in. The next thing we need to do is actually stagger a couple of those logos off, and the way I'm going to do that is I'm going to grab this masterTimeline, I'm going to put it here, and instead of the five, because we want to leave that, I'm going to take that off of here, and now we're just going to change our CSS logo, our JavaScript logo, and we're just going to set the opacity to 0. We don't want to move those up any, so I'm going to take that last off here, and we can leave that at .1. We want that to happen a little faster, and we need it to go to this time, so you have two of those. Let's see what happens with slideOne. I'll refresh this, and you should see none of the logos showing, and none of the text, and they'll slowly come on. Notice how they're all off. You'll see the text come on, and then the logos pop on there as well. Then the animation goes off, and the text disappears, so that's exactly how we want slideOne to work. We may put a little bit of delay on there, but we'll do that later on. Now that we have slideOne working we can easily morph the HTML 5 into the rectangle. We're going to move to the next video, and finish up the second slide and the third slide. Animating Slide Two and Three Now that we have slideOne done, let's finish up slideTwo and three. Now the way we're going to do this is we're going to morph this logo into that rectangle, and then display the don't panic text that's on here. Then we're going to bring in the we can help text. We're going to slowly bring that in. Let's jump over to our code, and wrap up that whole slide, and then move to slideThree. Now back in our code you're going to see that we stopped with animating those logos off of the stage. There's a couple of things we need to make sure of if you remember morphing text in this last module. One thing is that you can't morph a rectangle, a polygon, circle or anything, so we need to fix that, and MorphSVG has given us a nice little tool to convert the path, and we're basically going to do convertToPath, and what do we want to convert? We want to convert a rectangle if there's one, a polygon, a circle, or an ellipse, and so what that does again, is it basically, if there's any rectangles, polygons, circles or ellipse in there it's going to change them to a path. This will help us when we morph our logo into the rectangle. The next thing we need to do is we need to make that HTML logo, we need to change it, the X and Y value, and we're going to morph it a little bit, because we want it to move over. So we're going to go ahead and do the masterTimeline, and on this one we're going to set to, and we're going to call the htmlLogo. We're going to make this happen in .5 seconds, and then what we are going to do is we are going to set the x value to -42, so we're moving it to the left. We're going to take the Y value and move it up a little bit, and then we're going to morphSVG, and we want to morph that to the .panic, which is the rectangle. Now if you remember correctly, the logo, the HTML logo is all orange, and it has some different shades of orange as well, but it's filled with color. It's not just a stroke. Our rectangle is just a stroke, so that's important to know because now we're going to change the fill of that HTML logo, and we're going to make it basically invisible, and the way we're going to do that is we're just going to set all of these values to whatever you want. The only difference is we're just going to set the opacity to 0 on that. Then after the fill we're going to have to set the stroke as well, and the stroke is basically just any color, and we want to do the color of that orange that we're transitioning to. That's going to be the #E44D26. After that we're going to set the strokeWidth of this, so we're going to just do strokeWidth, and we're going to set that strokeWidth to 10. Now you can get a lot of this information out of the Illustrator file because it'll tell you that the strokeWidth was 10 on that. The next thing we're going to do is actually twist this a little bit, so we're going to do rotationZ, and we're going to do like a -14, and that should get us where we needed to go. The other thing is we need to change or we need to make the number five, and the light orange that's in that logo, we just basically need to turn that off. That's all we want to do. So from here we're just going to do a masterTimeline.staggerTo, not FromTo, just To, and we need to call in the selectors, which in this one we're going to call an array, and we're going to stagger them, so we need to do the fiveText, okay, and we're going to do the .lightOrange, and these are just the colors that are inside, well one's the color, ones the text that's inside the HTML 5 logo. What we're going to do after that array is set the time. Then let's pass in what we want to do, which is just change the opacity to 0 on the outside, and we're going to set that to .1, and we're going to make this happen sooner, so we're going to do it .5. So basically, that's going to make the 5 and the light orange disappear as that morphs into the stroke. Next, we need to turn on the don't panic text, so we're going to go from 0 to 1, so it's not on the stage when we start and then we're going to stagger the can words. So let's do this. MasterTimeline.from, get our selector for the dpText, then we need to put the time, which we're just going to leave at 1 right now, and then we're going to set the opacity, and we're going to take it from 0. Then next is we're going to do masterTimeline.staggerFrom, and we're going to call in weCan. We don't need stringer on there, so just do weCan, and we want the words here. We want how fast, which is 1 second, and then what we're going to do is we're going to change the y, -20 again, and the opacity to 0, and we want those staggered .25. Now that we have that let's go take a look at what slideTwo looks like now. Now this is going to go through one, and then it's going to go into slideTwo. Let's go take a look at this. Refresh this browser, and you'll notice that the words from slideOne start coming on, and so do the banners. The words will go off, the banners will remove, and then it'll morph into the rectangle, and put don't panic, and then you see the words come on. So we've got slideOne and slideTwo working. Now we need to get slideThree basically drawing, and then the words animating on. So we need to do these canDo words, and we need to get this green down here working, so let's go figure that out. Now that we're back in our project let's go ahead and get slideThree working. So we actually need to get rid of the weCan words, okay, and we need to actually get rid of the HTML, which now morphed into that rectangle, and we need to get rid of all of that, so no problem. What we do here is notice how we went from, which is opacity of 0, now we need to make the HTML 5 go away, and those words go away. Now this is really easy. We're just going to come down here and hit masterTimeline, and we're going to say to, again, the selector for htmlLogo. We're going to set this to 1, and let's set the property, and this is going to be, we're just going to set the stroke, right, and we're just going to give this a fill, rgba, of nothing, and that's all we need to do there, and we're going to basically change that up. Now that we did that we're just going to basically move it up in the timeline a little bit, so it happens a little faster. The next thing we're going to do is we're going to stagger this. We're going to staggerTo, and what we're going to stagger is the weCanWords. We need to get those off of there, and again, it's not a string, so weCanWords. How fast do we want to get them off? One second, and we need to move the Y again. We're going to leave those at -20, and we're just going to set the opacity back to 0. We'll stagger those at a .25, just to stay consistent. Okay, so now we've actually gotten rid of the morphed rectangle, we've gotten rid of the weCanWords. The next thing we need to do is get rid of the dpText, so I want that to actually happen right around the same time as this HTML logo, so I'm going to move this up here. I'm going to do masterTimeline. We just want to change that to, and again, we're just going to do dpText, okay, and that's it. We're going to put the time in, which in this case, let's leave it at 1, and then the opacity, and we're going to set that to 0. Now that we've set dpText to 0 we're going to remove the HTML logo, the stroke, then we're going to get rid of the words. That takes care of all of slideTwo. Let's go to slideThree, which can happen very quick. We're basically going to animate two big sets of words, and we're going to us SplitText for that. So we're just going to come up here and create two variables, and these variables are going to be called canDoText, and it's a new SplitText, and we call the selector, which in this case is slideThree.canDo, and we're basically just going to pass the type, and we're just going to leave the type the same as what we've been doing, which is words and chars. We're going to do canDoWords is equal to canDoText.words, and again, we're going to go to canDoChars is equal to canDoText.chars. We're going to actually just copy this because we're going to do the same thing, and we need to get the last, which is the last URL down there, which I'm just going to call, in this case, gsText. Gs, and then we're just going to change this to gsWords, and gsChars, and don't forget to copy this and paste it over. So now we have the text and the words. We also need to change this to be gsapLink. Now that's the selector. Now we have the characters and words. Let's get going and finish them up, so we can finish slideThree. We're just going to do masterTimeline here, and we're going to draw those letters on. Now we've done this in the last module, and it's very easy. We're going to do staggerFrom, and we're going to call an array here, and we want to do, all of these, if you remember, are capital letters, and they're all ids, so we're going to do G, S, A, and then P. So now we have all of our letters right there. We're going to take 3 seconds to do this, and now we're going to draw this SVG, and basically we're just going to start all of the letters at 0, which means you won't be able to see them, and we'll draw them to 100%. You can use an ease on this, so I'm going to set the ease to Quad.easeInOut, and then I'm going to actually stagger them .5. For the last one I'm going to set the masterTimeline to staggerFrom, and these are the words, canDoWords, we're going to set 1 second, and let's set all the properties here, which this is just opacity, set to 0, and I'm just going to duplicate that, and the only thing I need to change here is just the gsWords, and that should bring them all on. So we should be complete. This last one, as these other letters go off, this last one would bring all the letters, draw them on the stage, and these will animate the words on, coming from 0. Now we don't have to worry about getting rid of anything on the stage for slideThree because that's the last thing that's going to be seen. Let's see what all of this has brought together for us. When we refresh this you should not see any elements on the stage, and you should start seeing slideOne come in, and then slideTwo and three. Everything's gone. SlideOne starts to animate in. You see all the words come in. As soon as they hit they go back off. You can add a delay to that if you would like. We morphed into that don't panic, we got rid of it, got rid of the words, and now we start drawing slideThree in. Here comes the words, and then GreenSock.com. Now you can do anything you want here. You could have animated those canDo a little bit better. You could change the GreenSock, you can change the timing to all of this easily inside of that masterTimeline. So again, this has taken everything we've learned in this entire course, and put it into one small project, but we did it with very minimal code, and we've done it in sequence, and it's made it very easy. GreenSock can allow you to do a lot of projects, and this is just one, and even though web banners don't sound impressive, there definitely is some good industry work out there for them. Hopefully this helped you learn more advanced features in GreenSock. Summary and Course Wrap Up So to wrap up this last module I want to just talk about what we did creating this web banner, and we used about everything that we learned throughout the entire course. We've used SplitText, we used MorphSVG, DrawSVG. We used a lot of things and a lot of features that GreenSock has to offer. Of course, we morphed an SVG. We moved that HTML logo down to the rectangle, and I also showed you how to remove the fill, and we also turned it into a stroke, which is very cool. Animating words with SplitText makes creating web banners or any other animation onto pages very, very easy. In our case, we used words more than characters for the banner, but you can do whatever you would like to create great animations. Last, but not least, we learned how to draw an SVG, and we saw the GreenSock, the GSAP get drawn onto the stage. This could be some really cool neon light features or something like that that you could do in other projects. So to wrap up the entire course, you can use GreenSock and all of their plugins to create animations that will work in almost every device. I hope you enjoyed this course and learned a lot more about GreenSock and what it has to offer. Course author Todd Shelton Todd Shelton is a Front-End Web Developer making mobile/web applications. He is a lecturer at IUPUI's School of Informatics and Computing in Indianapolis, Indiana. He runs a successful user group... Course info LevelIntermediate Rating My rating Duration2h 38m Released15 Apr 2017 Share course