2.4 Tweening Attributes

Hello and welcome back to advanced animation with GSAP plugins. In our last lesson I showed you how to set up your svg files for morphing their shapes using the ATTR plugin that we're gonna be talking about in this lesson. And now I want to actually create that morph. So if you remembered, we first created an svg shape and then just copied the whole svg over. But then it also took this shape, morphed it around a little bit, and then just copied the points themselves. We didn't need the whole svg this time. So what I'm gonna do is I'm gonna highlight everything here. Including the quotation marks just not the points equal. So this is going to be the ending state of our animations. So I'm gonna grab all of those points and copy them and then we'll move back into our browser. So here we have a new code pinthat we're starting with here. And I will include the URL for this code pin in the course notes. So once you open that up, go ahead and click on fork to create your own copy of it. And then in your own copy, we're gonna jump in and make this happen. So again, we don't need any CSS for this particular lesson. So I'm gonna move all of this over and jump into our JavaScript. So we've created a variable for our star, let's nudge that down to the next line. And our first variable here is going to be for our new shape so let's just call this new shape. And we're going to set that equal to, the value that we just copied. And we don't want to break to the next line, we want to make sure that all stays in the same line so we'll just back that up a little bit to make sure there is a space between this 180.9 and the next one. Make sure you don't go back too far or you're going to have the wrong number of values there because it does look at the space separating each of these numbers. So everywhere it sees a number here it's going to look back at the original shape which is, for example this shape here. It's going to look at that first number, compare it and it's going to animate those two values. So this first value, it's not gonna animate at all but this second value, which is the y value, it's going to animate from a value of 50 to a value of zero. So it's gonna be animating upwards on the stage and that's gonna be the very first point in that particular SVG. So you can take a look at each of these XY value pairs and compare them back and forth and see how each of these shapes is going to animate. And this ATTR plugin allows us to look at any attribute which in this case we're going to be looking at the points attribute and animate any of the numbers that are contained inside of it. And one of the great things about this plug in is you don't have to do anything special to link to it. You'll notice in our settings under JavaScript all our pointing to here is TweenMax.min.js. We don't have to point to the ATTR plugin because it's included by default. Now there are a couple of plugins we will need to point to but we'll see that as we move forward. So let's close that. And so we now have our new shape here and then at the end of our new shape accidentally put a semi-colon here. Let's put a comma there since we're declaring another variable right afterwards. So I don't wanna get rid of our initial animation, I still want this to rotate around. But as it's rotating, I want to animate the shape or morph the shape, from this value to this value here. So we have our first tween here, I'm going to go to just after that tween and we're going to create our second one. And it's going to start off looking just like the first one TweenMax.to. We're going to be animating the star, this time we want it to be a lot quicker. I want this one to last maybe just two seconds comma space and then we'll have our opening and closing curly brackets there and our semi-colon at the end of the statement and just like I've done before I like to go in here and go ahead and nudge those closing curly brackets in parentheses down a couple of lines so that it's a lot easier to read our code. If we wanted to we could put this whole tween all on one line, but that makes it a little difficult to read so I like to separate them out a little bit. And the way this ATTR plugin works, is we have a value here called ATTR that's going to be our property and then our value is going to be another object. So, our value is going to be another set of curly brackets and we're going to break those curly brackets up in a second as well but for now I'll just put them there to reduce confusion. So, pretend like there are some values inside these curly brackets. For now, we'll just go to the end and continue. So we would treat this like any key-value pair. If we wanted an extra key-value pair, we would just put a comma at the end and go down to the next line. So for example, we might want to repeat this one endlessly, and we do want to repeat it. So I'm gonna set the repeat value here to negative one and you can add the easing here and things like that so that's how that would work you would put your key value pair here and then another one here just like we've done before but it's going to get a little more complicated just because we now have curly brackets within curly brackets. So I just want to do this one step at a time so it doesn't get too confusing. So now I'm going to go in between these curly brackets and hit enter and now in between those two curly brackets we're going to put all of the key value pairs we need for this particular attribute object. And all we really need here is the name of the attribute, that we want to animate and then the value that we want to animate to. Now keep in mind that the attribute that we animate here needs to be an attribute on the object that we're pointing to here, this star object, and remember this star object is pointing to the star class right here. Which is right here in our HTML code. So we have to point to an attribute on that object, on this particular object here in the attribute we're pointing to It's called points. So inside our curly brackets we're gonna put the name of that attribute we're pointing to which again is called points and then we'll type colon space and then just like we've done with anything else we put the value we want for those points now. So we could put that long string of values inside quotation marks here or since we've already stored it in a variable called new shape, we're just going to type the name of that variable here and there we go. So that's all we need inside these pair of curly brackets. So now we can see that animation happening. And it's really, really cool looking. So it's animating all of our points from the starting position to the ending position. The starting position being whatever's defined here in our HTML. HTML and the ending position for each of those points is defined again up here in this variable that we created. Now I want to do a little bit more with this animation because right now it's animating from the start to the end shape. However then it's just jumping back to the start and I don't want that to happen I want to actually move back and forth and the way we do that is with a value called yo yo. Now this yo yo value needs to go on the tween not on the attribute. So we don't want to accidentally put it inside these curly brackets here. It needs to go inside the outer curly brackets for the tweens, so we'll do it just after our repeat. So at the end of repeat negative one we'll type a comma, go down to the next line and then we're going to type in the yo yo value and set it equal to true. So now once it refreshes you'll see that it gets to the end of the animation and then it just animates back. We can make it even more interesting by changing the easing for that animation. So, I'm going to type in comma and go to the next line and we're going to play around with the easy value a little bit. Let's see what it looks like if we do bounce dot ease out. I don't think this is going to look great but I'm going to try it anyway. And it's not too bad but not my favorite what I want to actually set this to is a value of elastic, dot ease in out. That way there's going to be some bouncing backwards and forwards at the very beginning and the end of the animation and there we go I like the way that looks. So now we have created the ability to morph our as SFTG objects from one shape to another shape simply by taking each individual point, the coordinates for each individual point of that shape and animating each of those coordinates using this attribute plugin. So hope you've learned a lot from this, and hope you find some really creative ways to use this, because there are endless applications for things like this, so thank you for watching, and I'll see you in the next lesson.