What do you want to learn?
Skip to main content
by Todd Shelton
Resume CourseBookmarkAdd to Channel
Table of contents
Using the ScrambleText Plugin
Setting up and Importing
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.
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
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
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
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
Animated Opening for Final Application
Setting up the Banner
Adding Styling and Placement
Animating Slide One
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.
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...
Released15 Apr 2017