2.2 Tweening SVG Shapes

Hello, and welcome back to Advanced Animation with GSAP Plugins. One of the great things about GSAP is it makes it really easy to animate anything that you put in your HTML document. You can animate anything that your JavaScript can get its hands on. That includes, in this instance, svg objects. So in this starting pin, all I've done is I've included an svg file and we're gonna jump into TweenMax and animate this svg file. Now as we move forward, we're gonna learn how to use the attr plugin or the attribute plugin to morph the shape but for now we're just gonna do a very simple rotation with the shape. So if you've used TweenMax for any length of time, this is probably something you already know how to do. So we have our HTML here. Again, it's just a simple svg with the coordinates for our shape pasted into it. And you'll notice there's no CSS. All we need to worry about now is the JavaScript. So for this particular starting pin, if we go into our settings you can see in the JavaScript tag that we have jquery and TweenMax included. And again you can get to TweenMax very easily and jQuery as well using this quick add drop down. >> Now you won't have some of the plugins that we're gonna be using but you do have those two at least. So once those are in there we can actually make this happen. So before we get any further with this, I don't want to overwrite our starting pin so I'm going to click on fork so that we can all create a new copy of it. And I want you to do the same thing as well so that you can follow along. Once you've forked it, you can then do whatever you want to. So, let's minimize CSS, we don't need that for this particular demonstration. And let's jump into our JavaScript. So, the first thing I wanna do is I wanna point to our element that we're gonna animate and that's this polygon here inside our svg file. And you'll notice our polygon has a class of star. Now I created this particular polygon in Illustrator and then exported the svg object as text, and we'll talk about how to do that soon. But one way that you can customize what these names appear as in your svg text is when you're creating your file in Illustrator you can name your layers or even the objects in those layers accordingly. And it will give your shapes class names according to whatever you named the groups or the layers or the objects or whatever. Now in this particular instance, I actually just went into the text and changed it myself and gave it a different name in Illustrator, and I just changed it myself here. Now keep in mind that if you do change this class name that you also change it wherever it appears in your svgs. So up here, for example, it appears when it's defining the fill color in the styles. So you need to make sure that if you change the name here that you also change it there as well. Okay, so in our JavaScript, I wanna point to that star class. So I'm gonna create a variable called star and we're going to set it equal to. And I'm gonna use jQuery for this because this syntax is a little easier, and I'm going to use the CSS selector to point to that item .star. So that points to the shape itself and then we can jump into TweenLight or TweenMax, whichever one you prefer to use, to create our tween for. So I'm gonna use TweenMax and we're gonna do a two tween. So we're going to say TweenMax.to. And then I like to start off by putting my opening and closing parenthesis and my semi-colon. And then we'll type in the name of the object we're animating inside those parentheses which is star, space and then the amount of time we want it to take. Let's say we want it to rotate around 360 degrees, and we want it to take ten seconds to do it. So it's not doing it too fast, so I'll type in the number 10, space, and the opening and closing curly brackets that represent the object which contains all of our properties for our animation. So then inside those curly brackets I'm gonna hit Return or Enter to nudge that closing curly bracket and closing parenthesis down a couple of lines, and then inside those curly brackets we will include our properties for animation. So we want to animate the rotation, and I want to rotate it all the way around, so a full 360 degrees. So inside quotation marks we're gonna type 360 D-E-G, for 360 degrees. And as we can see right away, it's not rotating the way we want it to. It rotated around the upper left-hand corner, and we actually want it to rotate around the center of the object. And we can do that by adding a transform origin property. So at the end of this line, we can take a comma, and then we'll go down to the next line and we'll create another property called transformOrigin with a capital O, colon, space. And then inside quotation marks here I'm going to type 50% and 50%. That will change the transformOrigin to the very center of that item. And we can do that in pixels, we can do that in percentages, whatever. But if you use 50% space 50% that will get it right in the center no matter how large your object is. That way you don't have to remember the exact width and height. So that will get our rotation point where we want it and then we want it to repeat. So I'm gonna hit comma, go to the next line and I'm gonna hit repeat, colon, space and then we type in the number of times we want it to repeat. So if we just want it to repeat once, we just type 1 there and then it'll rotate around twice. However, if we wanted to repeat infinitely, we're going to type a negative 1 there. That way it will just keep repeating over and over again. However, as you can see, it's still not a perfect loop, because it's kind of easing out towards the end of the animation. So it kind of slows down and then it starts over again. So instead of slowing down, I want it to move at a constant rate. So we're gonna point to the ease property again. So at the end of that line we'll hit comma and go down to the next line. And then we'll type in ease colon space and if we want to turn off easing we're going to use Linear with a capital L .easeNone with a capital N. And that will turn off easing so that it's constantly moving or that it's consistently moving at a constant rate. And as you can see, I set this to 3 instead of 10 just so that we could see that looping quicker. Let's set that back to 10 seconds, and that's about the speed that we want. So there's our initial animation. And this is what we can do with the base TweenMax library. We can make something rotate, we can make it move. But if we're just dealing with the base library there's only so much we can do. What I wanna do next is I want to explore how we can actually morph the shape itself using the attr or attribute plugin. The attribute plugin allows us to take any attribute of any of our CSS, or I'm sorry, our HTML elements and to animate any numbers that we see there. So we're going to take this points attribute and we're gonna animate from this value to another value. Now it's important to point out that for this attribute plugin to work right, you need to have the exact same number of points here for your starting animation or the start of your animation and the end of your animation. If you end up with a different number of points, then it's not gonna work quite like you want it to. Now there is a premium plug-in for GreenSock that you can get to morph your svg files, to morph your svg shapes. And with that particular plugin, you don't have to have the same number of shapes. It will pretty much morph any one shape into any other shape and it does a pretty good job of it. But again, that requires a GreenSock membership, so that's a premium plugin that does require you to have a paid membership. For this course, we're just sticking with the free plugins which do offer quite a bit of flexibility in your animations. So in the next lesson, we'll talk about how to set up our svg file to morph it from one shape to another. And then following that we will actually jump back into JavaScript and talk about how to make that happen using the attr plugin. So thank you for watching, and I'll see you in the next lesson.