Animate Vector Graphics for the Web | Alex Trost | Skillshare

Animate Vector Graphics for the Web

Alex Trost, Frontend Developer and Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
14 Lessons (1h 16m)
    • 1. Introduction

      1:15
    • 2. SVG Shapes

      6:59
    • 3. Grouping and Styling SVGs

      3:30
    • 4. Intro to Greensock

      10:43
    • 5. Prepare the Scene

      7:00
    • 6. Beach Ball Sliding

      6:23
    • 7. Beach Ball Rolling

      5:15
    • 8. Sun Flare

      6:22
    • 9. Sliding the Fence

      4:19
    • 10. Sliding Landscape

      7:40
    • 11. Rolling Waves

      5:06
    • 12. Sliding Surfboards

      4:32
    • 13. Flying Bird

      6:29
    • 14. Final Thoughts

      0:45

About This Class

Let’s create eye-popping vector animations! We’ll use a powerful tool called GreenSock to animate a beach scene in a bunch of different ways.

You’ll love this fun and engaging course with Alex Trost, a Frontend Developer, Designer, and co-host of The Overlap, a podcast about design and development. 

The course will cover the basics of SVG, then get into an awesome project where we’ll animate a full beach scene. You’ll walk away with an awesome animation that can go on any website!

You’ll do best if you know a bit about HTML and CSS, but it’s not required. We’ll be using JavaScript, but don’t worry if you don’t know how to code. GreenSock makes everything easy to use, and the course goes step by step.

You don’t need any special software, and we’ll be doing all our coding in the browser. It’s easier than ever to create super impressive work!

This class is perfect for:

  • Illustrators and Graphic Designers who want to animate their work on the web.
  • Web Designers and Developers who want to add awesome animations to their projects.
  • Anyone who wants to create fun and engaging things on the web!

Transcripts

1. Introduction : [MUSIC] Hey, I'm Alex Roast, a designer and developer from New Haven, Connecticut. I love making fun and engaging things on the web. That's exactly what you're going to be doing with me in this course. We're going to be using an easy to use JavaScript library to animate vector graphics on the web. Vector graphics don't just scale beautifully, but we can edit each piece on its own, which opens up a world of possibilities. We'll be using a free JavaScript library called creating sock, which makes professional level animation easier than ever. Get are only JavaScript. Don't worry, we'll keep it simple and I'll walk you through each step. You should be taking this class if you're an illustrator or a graphic designer and you're looking to bring your art to life on the web. Or if you're a web developer or a web designer, and you want to add some awesome animations to your projects, you'll do best if you're at least familiar with the HTML and CSS syntax, because HTML and SVG look a lot alike, and SVGs can be styled with CSS. But don't worry, you don't need to be a pro we'll walk you through it. Whether you're already written with SVG or you've never used one before. You'll learn how to animate vector graphics that'll add delight and character to your projects. I'm so glad you're here. Let's get started. 2. SVG Shapes: Hey, welcome to the course. First we're going to be going over the basics of SVG. You'll learn the syntax of SVG as well as the main elements that we're going to be using in this course. Knowing the basics can help us a lot later when we're animating. SVG stands for scalable vector graphics. Vector images are really just math, lines, points, curves, shapes. They have crisp lines, so they scale great, and look nice on any display. They are perfect for animation because we have access to every part of the image. We can use vector programs like Illustrator, Sketch, Figma, or Inkscape to create SVGs. Any vector illustrations that you've already created can be converted to SVG and used on the web, or if you download vector images from sites like Freepick or Undraw, you can use those too. SVGs are human-readable, we can open up the code and see what's going on. We're going to look at a simplified example. But first, let's get you set-up with CodePen. CodePen is a free website that allows us to edit HTML, CSS, and JavaScript right in the browser, and see the changes live as they're happening. It's all web based, so there's nothing to download and sharing your work is super easy. Sign-up for an account so that you can save your work, and share it with us in the student project section on Skill Share. Now that we have a CodePen account, let's create a new pen and create our first basic SVG. Here we have our HTML, CSS, and JavaScript areas, and yours might look a little more like this, maybe along the top, you can change the view here to whatever you like. Here's what we're going to see our code render out our images. Right now we're going to go to the HTML area, and that's what we're going to add it in our SVG. Don't worry about typing out this SVG, normally we're going to use a graphics program like Illustrator to create our SVG elements, it's just good to know about the elements that we'll be seeing and the basics of how they work, I'm going to bring in an SVG here, an SVG wrapping around a circle element, and we see that this circle element is off at the corner here, you can imagine it going and completing here., the center is right at the very top left of our screen. That's a little confusing until we understand how the coordinate grid works with SVG. If we take a look here, this is a little diagram of how the coordinate grid is set up, and you see at the top left, that's the origin point, so that's zero, zero for both the x and the y axis. Right now, our circle is sitting at the origin point for its center. Now, if we go to the right on the x-axis, our numbers are going to increase, so to go from 0-50-100 and so on, and then on the y-axis, the numbers get bigger as we go down on the coordinate grid, so this is zero, 50 100, etc. Let's give that a try here with our SVG elements, so I'm going to give it a center that is bigger than the default, which is zero, so center x, let's have it move over 100, and then a center y over 100 also. We can move that shape out here so you can see the full circle. Excellent. Congratulations, you already have your first SVG shape created, we're off to a nice start. Now, just like the Canvas in Photoshop or Illustrator, we can define the height and the width of the view port in SVG, so let's go ahead and do that right now. I'm going to open up this SVG here, and I'm going to type a height of 300, and a width of 300, and you give it a little more space. Now, it doesn't seem like anything's changed, so let's give our SVG element a border to see what's going on a little better. I can go down here to the CSS and type SVG and don't worry, you don't need to follow along here. But you can if you want to, I'm going to give it a border of two pixels, solid, because it's a solid line and black is the color we're going to make it. There we go. We have a square because it's 300 by 300, and it has a black line. This is our view port in here, this is the area in which our SVG is getting drawn. Let's make the width a little bit bigger so we have a little more room to work. Excellence, and we see that it responded right away. Now, we can bring in another shape, so I'm going to create a rectangle, and I'm going to walk you through just exactly what we're making here. I have this rectangle that I brought in from that same file that you can get in the student notes, and we have the rectangle where it's going to start at x-200 and we see it comes over 200, and we go down 50 on our coordinate grid, and then it has a width of 50 and a height of 100. This is how we define rectangles, so we're going to see a lot of rectangles in our projects, we use them a lot for the background colors or the beach sand and the water. Anything that needs a rectangle, Illustrator or Figma is going to export it as this wrecked shape, and so it's good to know what these actually do in case you want to hand manipulate them at any point as you're creating it, so it's nice to know how these work. Now let's go ahead and create a third element, we're going to create a line and I'm going to bring in this line element, and I'm going to show you exactly what we have here. I'm going to move this over a little more so we can see, so I have this line element, and this line has two points just like lines in math we have a starting point and ending point, and we need to define the x and y for both of those, so our first point has an x of 300 and a y of 50, and that makes sense, the y is 50 just like they start here, and the second point has an x of 375 that's going to move over a little bit, and a y of 150, so become down a lot. We have to give lines a stroke so that they show up. Without this stroke, that line will not be visible because we need to define that it has a stroke, lines don't have a feel inherently, like these shapes do. We've created a line now, the element that's going to make up the majority of our project is the path element. Pairs usually contain curved lines that are way too hard to make by hand, so I'm bringing in the shape from Illustrator to show you what the syntax is like, so here's the path element. This d here stands for data. The data gives points and curves and says whether or not the shape is closed or open. We don't need to read this so don't worry, I don't know how to read this, you won't need to know how to read this. Don't worry about it. I just didn't want you to be surprised when you see them later, so here they are, the four basic shapes that we're going to be using inside our projects. Congratulations, you've learned the basics of SVG. Now you know how to create an SVG, as well as the main elements that we'll be using in this course. Next, let's work on grouping some of those elements and adding some style. 3. Grouping and Styling SVGs: In the last lesson, we made some SVG elements, but they're all that same color, black. In this lesson, we'll learn how to group those elements and add some style. SVG groups are great for styling, animation and keeping your code tidy. Okay, from the last lesson, we have our four shapes here. We are going to start styling these shapes a little bit more. I'm going to start off by grouping the circle and the rectangle elements. I want to wrap these two in what's called a group elements. I'm going to type a <g> just like that. That <g> stands for group. These angle brackets and then a close off that group by doing a forward slash and angle brackets there. Now this circle and rectangle are grouped together and they're really cool thing about this is I can style them by adding what's called a Class to this Group Element. With targeting things for styling and animation, we can use classes, we can use ids, we can use lots of different things, but those are the two that we're primarily going to be using in this course and that you should use in general. On this group, I'm going to go ahead and type Class equals. Let's say red, I'm going to make these two things inside here red not just adding that doesn't do anything. I haven't defined what this class does. Now what we do for Classes to designate a Class, we type a period. We're going to type the name of the Class red and we're going to do these curly brackets, and now we're going to type fill that's how we designate the color for <svg> I'm going to say tomato to cool red color that is native to Web. For tomato and there we go, we see that both elements inside this Group are now tomato. So very cool. The line and the path don't have any colors to them because they're not inside that Group. That makes sense. Now, let's go ahead and target this path specifically. I'm going to do that with an id. We're able to target elements in many different ways, but we'll be seeing ids and Classes in this course. Illustrator uses classes for Styles and ids for naming things. The ids will be very, very helpful for targeting things with our animation. Let's add an id to our path and let's give that paths and style. Type id is equal to and we're just going to say curve, so I gave it that name. Now we don't use the same period to designate an id, we are going to use the hashtag or the pound sign, whatever you call it, to designate an id. Hashtag curve and then we're going to say fill, let's choose another fun color, dodger area, dodger blue. I like that color a lot as a good colors. Let's give it a stroke as well. Stroke, let's say black just for being able to see it. Excellent. We've added Classes and ids to our elements. This allows us to target those elements. To remember to target a class we put a period in front in the CSS and to target an id with our CSS or our JavaScript later, we're going to be using this hashtag. Hashtag curve is an id dot red is a Class. Well done now you know how to create groups and add styles to ids and Classes. But the shapes are just sitting there and you're in an animation course. Let's get those shapes moving. 4. Intro to Greensock : In the last lesson, we learned how to group and then target our SVG shapes for styling. We're going to use those same skills in this lesson to target our shapes for animation using greensock. Greensock is a powerful but easy to use animation library. It's written in JavaScript, so it's perfect for the web, but has a slightly different syntax from the CSS and SVG that we've been writing so far. Let's go ahead and add it to our CodePen project now. All right. To add greensock to our codepen project, we're going to hit settings here, and then we're going to go to the JavaScript tab. Then here in the search, we're going to type greensock. As you can see, you don't see greensock here, but gsap is what we call greensock. The GS stands for greensock. We're going to click this and we will see that it comes up gsap, TweenMax.min.js right here. We know that it is installed in this pen. We can save and close and boom, we are all set to use it. We'll be using a function called TweenMax that greensock gives us. TweenMax is a super fast and powerful animation tool. It's really the core of greensock and we'll use it for all the animation in this course. It's robust and it's really easy to use. Here's how it works. We are going to type TweenMax dot, and then we give it a method so we can choose from a few methods. We're going to primarily be using the method to, to say that we want to move this object to this place, or to this shape, or to this color. Then we put parentheses and we say which element we want to be manipulating. We can actually put a couple of elements in here but for this, we might just say we want to manipulate the element with the ID of curve. Then we say the duration that we want this animation to take, and that's in seconds. This would take two seconds. Then we pass at whatever variables we want that animation to take on. In this case, we're going to be moving on the x-axis by 100. We are going to be increasing wherever that curve element is by 100. That's really all there is to it. We can add a whole bunch of variables to do a lot of animations with just this one line of code, but this is what it all boils down to. TweenMax dot some method, we pass it the element we want to animate, the duration of time that the animation will take, and then all the things we want to do to that element. Let's do this to our elements. Let's get to it. Here in our JavaScript, this is going to be the main place that we are going to be writing our code. We're not going to create a whole lot of SVG code, we're not going to create too much CSS, but we are going to be creating a lot of JavaScript. I want to make sure that you really get this part and that this part is not too tricky for you. We're going to start off every animation by typing TweenMax capital T, capital M, and then we choose our method. The method that we're going to be using for the most part is to, just like that. You do TweenMax.to, and then we do parentheses, and now we need to give it the actual element that we're using. Just like in our example, we're going to be doing hashtag curve inside quotes, so we have some double quotes hashtag curve, and then outside those double quotes, we put a comma to separate the element, the duration, and the variables. With a comma, we separate the element and the duration and our duration will just take place over two seconds, and that's just a regular number two. We don't need to put that in quotes. Another comma, and now we have our variables. Now our variables are going to be going inside curly brackets like this. All right. We can put many variables in here, but they all have to live inside this curly bracket object. For this one, we're just going to start off by moving this shape on the x-axis so we do x colon 100 and we're going to see as soon as you finish typing that, look at that. Our shape moved over. Pretty cool. I really like that. We have our first animation, and the cool thing about CodePen is that if I edit any of these lines, if I hit enter here, it's going to rerun our code. Here we go. It's going to rerun our code if we start changing the lines just to make sure that it is up to date, but we can see our animation repeat that way. That's one way that you can have your animation repeat by changing the code a little bit. Let's get our code to do some more stuff. Let's use the same line, we're going to put a comma to separate the variables in here. I want to move this on the y-axis as well. I'm going to put y, but I don't want it to move down, I want it to move up. I'm going to use a negative 100. Let's see what this does. y colon negative 100 and we see, just like we expect, it goes up on the y-axis and to the right on the x-axis. Pretty cool. Let's see this animation one more time. All right, pretty nice. Let's add some more things. We can move objects around, but we can also change the opacity of each object. If I want this object to fade out as it moves, I can say opacity and I'm going to give it a number from 0-1. We have to use a decimal. I'm going to put 0.5. Just like that, you see how it's semi-transparent by the end. It will start off the same way it was. It's fully opaque, but by the end, it is half transparent. That's pretty cool. Let's add another variable here. I'm just going to running you through the main variables that we're going to be hitting in this course. I want this animation to repeat. Now, the way that we do that is by typing here, repeat, and then we can choose any kind of numbers. You could do three. That's going to make this animation repeat three times and then stop forever. There's the third repeat and then it's done. But what if we wanted our animation to repeat on and on and on and on and on. There's a handy trick, we just do negative one and this will repeat forever. We have our animation repeating just like that, but I don't like the way it snaps back. You see how it doesn't ease back down, it starts over at the very beginning. We have a really cool property that we can pass here. It's called a yoyo. I want it to go in reverse once it's done. Let's try this. Yoyo and we set this to true because we want this effect to happen. We say yoyo, true and look at that. Just like a yoyo coming back up and down, we see this animation going forward and then going in reverse and then starting over again because our repeat is negative one. For yoyo to work, you have to have a repeat. Let's do one more thing to that shape. Let's actually change the fill of it by the end. Because with greensock, you don't just animate where the elements are or what the opacity is, but you can actually blend between colors. Let's go from blue to red. I'm going to do fill red. I actually have to do that red in quotes because it's the name of a color there. Make sure your red is in quotes. We have it going from blue, to a purple, to a red, so it's a nice smooth blend. Look at that with one line of code. We are able to do all these things to this shape. That's pretty cool. Let's go ahead and target some of the other shapes that we have in our scene. I want to grab this group here and do some things to the two things inside it, just to see how these react by being in a group when I target a group. We're going to do the same thing, TweenMax.to. On a new line, go ahead and do TweenMax.to, and then we're going to type in quotes. Remember, classes are dots, so we do dot red, and then we want to say maybe this happens over the course of three seconds, and we want to start with our variable. With these, I'm going to play with a couple of different properties that we haven't used yet. Let's shrink these down to half the size. Shrinking or growing, we're using the scale property. S-C-A-L-E. Scale, and these are colon, and I'm going to pass this a number. If I pass it two, it's going to go to twice the size. I'm going to shrink it down to half. Let's do 0.5, and let's see if this works. There it is. The shapes shrink down to half the size and they stop. Why? Because we don't have the repeat property here and we don't have a yoyo, so it's just going to go once and it's not going to repeat it all. That's the default. Let's continue by adding a rotation. Let's spin these around. Rotation, and I'm just going to put this in quotes because I'm going to say rotation 360 degrees. When you are using something that's not just an actual number like 0.5 or negative 100, this doesn't come out to be a number with greensocks so make sure you put these in quotes. If you're not sure, usually putting it in quotes is the safer bet. But as I was talking, we saw it go there so let's move some of our code around and see if it really re-triggers. There it is. Spins around and shrinks down. Pretty cool. All right, so we have it spinning one full time because it's 360. Now let's have this repeat like we did the other one. We'll be using a lots of repeats in this course so get used to typing repeat negative one, and see it snap again, that's fine. Let's add a yoyo true. All right, see it bounced back in around. We see it go down and then reverse back. Excellent. They see this line is not doing anything because we didn't target it at all. That's fine. This looks really good. I'm really happy with this. Great job. Great. You've learned how to get our shapes moving, changing color, repeating, and bouncing back and forth. Let's leave our demo project for now, and let's crack open the real project and get everything animating in a real SVG scene. 5. Prepare the Scene : Now that we know how to work with SVG and GreenSock, let's take a look at our project. I have prepared a beach illustration that you can download and the project notes, all that code is set and ready to go. But I want to show you a few tips on how to export a scene so that you're not lost when you try to do it on your own artwork. Here an illustrator, I have my project open. You can use any vector-based app Illustrator, Figma, Sketch, Inkscape. All these programs really behave in a similar way and export SVG code. Even if you're not an illustrator, you don't plan on creating any brand new illustrations, but you just want to use something you found on free pick or on draw, that's totally fine. You're not going to be creating it here, but I still recommend you getting familiar with these things so that when you want to edit those, to tweak them a little bit or you can name and label them a little better. You're familiar with these kinds of tools and I've got a few tips here that I think will really benefit you if you're creating this illustration, even with other people's graphics. The first thing we want to do is set our art board up with some nice even numbers, so that we can remember. I went with 1500 by 1000 and I just wanted those dimensions with a landscape picture, if you're doing something that's a square or a portrait, you can do totally different numbers, but something that you can remember is going to be easier to create the tiny bit of math that we have to do here. When we're setting up a scene like this, I don't want to mess up my origin. That's a big thing here with animating SVGs. We don't want to mess up the origins. You see that I've kept the left side and the top completely clear so that my origin is right here zero zero when I export this to SVG. Everything that needs to come into the scene is off to the right. I've tucked our surfboards off to the right: beach ball, bird, clouds, everything is going to be animating in from the right, and that makes it a lot easier when we have an origin at zero, zero and we don't do anything funny to keep that. Let's talk about naming. You'll really make animation easy on yourself if you name your groups and layers. You can see that I've named every main layer or group so that when it gets turned into code, look at that here. I know what I'm looking at, so if it's just this, I don't really know what this is, but, here is our ID, I know that this is the ball and here's the ball group. I know that this is the wind group and we can take look at all these things. There's my ball Group, and the ball is the actual part that is just the ball and it has some shadows and things that I don't really care about too much. But without naming it, it's so much harder to navigate your code and target it for animation. You don't need to name everything. I've got this fence group here. I didn't name any of this stuff because I'm only going to be animating it as a whole fence. I don't really care about the paths and you'll see that I have a lot of paths and they only have IDs here, that's totally fine. Don't go crazy with naming. Ask yourself, am I going to animate this? If you're going to animate it, it needs a name, and with grouping. Let's talk about grouping. Grouping, we're going to be very tactical about how we group things. Let's look at this bird. If we see this bird here, we see that the bird is a group by itself. The bird is grouped, and then inside that bird group we have a couple groups. We have a bird body group, and that gets everything there. The front wing group has the wing and also the little tip, and the back wing group has the wing and the tip. I wanted to group all those things together because I'm sending this bird across the screen as a whole. Sending him in, and then I'm also going to be animating the front wing to go down and the back wing to go down. I want to make sure that these tips stay on the wing so I wanted to keep those as one group, and then the body is it's own thing. That's why I grouped the bird like this. I recommend you thinking about how you're animating each object and grouping them in that way. Next, let's talk about how best to set up these repeating elements. We have a lot of repeating elements. Some of them are going to go across the screen and disappear. Others are going to stay on the screen in some form. Our surfboards are going to slide across and then disappear, and then they'll snap back over here and then do it again after a little bit of time. But some things like the fence are going to repeat over and over again, they never really leave. How do we do that? What we do is we use two copies of the same item. This fence is the same as this fence. They're the same size, same style, same everything. One takes up the entire art board here, and the other is the same size, and it's just off to the right of the art board. What we're going to do is we're going to move them both together, and as soon as it gets off to the edge here, it's going to snap right back in the place. This may not make a lot of sense, but it will as soon as we see the full animation like this. You see how the fence moves over all as one piece, and then as soon as you get to the edge here, it's going to snap back seamlessly so that it looked like it's continuing on. But it's actually just coming right back. And then doing the same animation again. It's not doing a yo-yo, it just snapping back. Every element in this scene that stays on is doing the same thing. The islands are doing the same thing, the rocks, the waves, the clouds, they're all moving to the left, and then you saw the waves snap there, and then as they get to the edge, they're going to snap back, and it's going to get this instant seamless animation that you don't really pick up on if you have the edges cropped. Seeing it like this, I hope, makes it a little bit clearer as to how this trick works. Last I want to talk about exporting. How did we get SVG out of illustrator and over into CodePen? I like to personally select everything, copy it, at copy, and I like to use a tool called SVGOMG. If you go to jakearchibald.github.io or just Google SVGOMG. You can go in here and we can paste our markup or our SVGs in here. We see that we have exactly what we are expecting. This as our same illustration here. Now I can go into the markup and see that this is what it actually is under the hood. This is all the code that's drawing those shapes. Over here, I want to make sure that I'm not cleaning out IDs. There's lots of settings here. Don't worry about too many of them. Just make sure that you are prettifying the markup, and we can hit this copy button, and then we can go ahead and paste it into our scene. Now you know how to get your own scenes ready for animating. Next will be animating our first element of the project in GreenSock. We're ready to get rolling. You all know the second [inaudible] 6. Beach Ball Sliding: Now that our scene is set, let's start by animating our beach ball. We're going to get it sliding across our scene. We'll learn more about repeating as well as animation easing. Let's do it. All right, so I've left a demo and I've created a new pen and just named it beach scene. Now, we're going to go ahead and copy all the code and then select all copy from beach.SVG in the O6 project folder and paste it into the HTML box. We'll see some not-so-great looking styles here or the image there, because we need some of the CSS so and a copy of the CSS into the CSS box. The reason why we're just copying pasting this is because this is mostly made just from illustrator, I didn't hand code any of these paths. This is show you the illustrator, just paste it in and you can't see it but our surfboard, our ball, our bird is off to the right and we're hiding those with this mask here. This is only thing that I edited by hand. What I did was, I added this mask element and inside it, I am masking it or cropping it to this rectangle and you'll see that the rectangle has some similar properties. We have the 1500 width and the 1000 height, that our view box and the width and height here halve. This is all exported from Illustrator but I'm adding this mask, without this mask, it would not be as crisp and clean when we do that. We want to hide that and so to do that, we are putting in this mask. I already did it for you, and then we group the entire thing with that mask so that we hide that. Masks are pretty cool, we're not going get into them too much, but I just want to clean up my edges so that it looks nice at any size. Now let's get into animating this beach ball. The one thing that illustrator doesn't do for us is the JavaScript. We need to do all the animation in JavaScript ourselves, so we're going to start off with our TweenMax, just like we did in the last animation videos. TweenMax.to and then we have this ball group, we're going to specify that remember, "#ball-group". I want this animation to take place over five seconds and now I'm going to start to feed it some variables. So we do our curly brackets, we do x. I want it to go from the right to the left. So if we look at our illustrator image, we want it to go from about, let's see, where is this? So this is at the 1,551 mark on the x-axis, we want it to slide all the way over to pretty much -70. So just to be safe, I'm going to give it a -1700, so I know it's going to go off the screen, all the way to the left. So it's doing exactly what we thought, but it's not looking the way that we need it to and I'll show you what I mean. Let's add a repeat so that it repeats forever. Repeat negative one, remember that it'll loop forever and ever. You see how it's slowing down at the end there, it comes out real fast, so it shoots out and then it slows to a stop. So that's the default way that GreenSock is going to animate things. Let's look at a way to make this a little bit more constant. So this is the GreenSock ease visualizer. If you go to greensock.com/ease-visualizer or just Google greensock ease you will find this. This is a great resource for finding an ease that animates your thing just the way you want to. So there's lots of cool stuff here. There's an elastic ease and you can see this balls and act kind of how our ball is, just this one's going up and ours is going over to the left. So with this, we can see the way that we want our ball to move and this is how it's working right now. It is shooting up pretty fast and then slowing down. We can make that even more dramatic with one of these other eases but we really just want to make it so that it is, some cool effects here, so that it is moving at the same speed the entire time. That's what this graph represents. The progress and the value are the same throughout and so that's the kind of ease we want and down here it shows what code is being run. So we have ease: Power0.easeNone and then for them it's y -500 because they're bringing this ball up. But all we need is this part here and if you change, you'll see that that changes too. But right now, we just want this ease:Power0.easeNone and so we're going to copy this and then bring this over here. If you just want to type that out, ease:Power0.easeNone , that's fine. But you can see that already it's a much more constant speed. Speed is staying constant the whole time throughout this animation, looking better for what we want it to be here. I don't want that ball coming out all the times. We're going to do a repeat delay and that is a way to stop in between repeats. So if we add this repeat delay, so I need a lowercase r and a capital D. Let's get a little bit hairy with all the capitalization where this one's capital and this one's lowercase but JavaScript has a reason for this stuff. I'm not going to get too much into it but kind of make sure if it's not working, you have your capitals and your lowercases, all correct. Let's do three seconds just to test this. So it's going to go and then we should see a three second gap between that first and that next repeat. Two, three, boom, there it is. So we know it's working, let's bump it up to ten. I want it to look a little bit more random. We don't want that beach ball in there all the time. So now we have a pretty cool animation where we're using several properties and we're getting into some really advanced stuff. This is looking good. Awesome. You just learned about easing, worked more with repeats and repeat delays and now we have our ball sliding across the screen. Next, we're going to get it spinning. 7. Beach Ball Rolling: Now that we've got the ball sliding across the screen, let's get it spinning so that it actually looks like it's rolling along the sand. We're going to need to target the ball without its shadows and highlights and also get it spinning on its center axis. Let's get into it. All right, so now we have our ball sliding across the sand, it's not rolling. Let's take care of that in this lesson. Now, let's just see what's going to happen if we add rotation here. Like we did in that first time, lets say rotation 360 and wow, we have a few issues here, don't we? First issue I see is that it is taking the entire shadow with it so we have a little drop shadow, we have a highlight, and we have some shading on this ball and it just does not make sense if the ball has its shadow rotating. That's our first issue. Let's take care of that by targeting not the ball group, but the inner ball. Remember I made a group of just the white and the red panels without the rest of the shading and that's called ball. Let's get rid of the rotation here and let's create a new line. We're going to TweenMax.to, let's see it again has the idea of balls, remember #ball. For now let's just have it rotate for the entire time that the ball is on the screen and that's five seconds from the one above. We're going to give that a rotation of let's go 360 just for now and then we can take it from there, make sure that this is working as expected. We have some progress here. We're seeing that the ball was rotating without the shadows and the highlights, but clearly that's not how we want the ball to rotate. The main issue for that is that what the ball is rotating from is the top left and we need to add a repeat. But it's rotating from the top-left as the origin, that's not what we want. We want it to rotate from the center of the ball so we need to change the origin for this transform. We're going to use the property transform and then O, origin, and then this is going to take like this, then we're going to say, "center, center" and now we can see as, all right, it is rotating. We're still seeing some issues, but we are getting somewhere, aren't we? We have this ball rotate and see, struck this repeat delay for now so we can work on it a little bit easier to just have it constantly rotating. All right cool, we have a few things, you see how it slowed down at the end. It's going fast and then it slowed down, can you guess why that is? If you said this ease, that is correct because it has the default ease. It has that one where it comes out fast and then slows down at the end, I'm going to copy this right here. We need to copy this and hit "," and it doesn't matter what order these go in, as long as they're on their BC, it's going at a steady speed now, much better, but you might notice that it's going in the wrong direction so we can do a negative here, and just like that, it is rolling in the right direction, so it's already looking a lot better. But here's the thing, I want this animation to go a lot slower because this ball is in the distance and with the rest of the animation, it's going to take about 30 seconds to get across. If we do that long animation, we don't want to just roll this much, that doesn't look very real. We need to really bump up how much it's going to rotate so let's bump this up to about 4,000. All right, so now we can see it's rolling across, it's going to look a lot better when we have everything moving, don't worry, but we're going to put that there and the last thing we're going to do here is just add that repeat Delay back. Repeat delay has put it at ten seconds and we can put that same repeat delay over here so that they're not out of sync so they're both going to wait ten seconds before this animation repeats. Right now it looks like it's spinning a little too much, but it'll make a lot more sense when everything is moving to the right. We have our ball spinning, you figured out how to get it to transform on an axis. We are rotating it from the center rather than the top-left and we are using our eases and our repeat delays, awesome job this is looking really good. Fantastic, you've learned how to target specific shapes and bigger groups, as well as rotation and transform origin. Things are really rolling along, that's fine, I promise. Let's add a fun animation to the sun in the next video. 8. Sun Flare: You have that sun sitting there in the top corner, but I want to make it feel like it is really radiating some heat. Let's make the circles around it expand and contract to give off that animated heat effect. In this lesson, you will learn how to resize objects by using the scale property. Let's get to it. All right, so we have our ball animating across, now we are going to get to the sun and just to zoom in and show you the more details, we have some subtle lines here. We have two circles outside the main sun circle that act as this radiating heat lines and I want to animate those. Let's first find where this sun is, so S-U-N find it, and here we've named the sun bands as I have called them, sun-band-1 and sun-band-2 and then we have the sun and it is all wrapped in a sun group. If you wanted to, you can move this sun around the scene, you can have it move across, if you were to make yours custom, but right now we are just going to be working with sun-band-1 and sun-band-2. We are going to create a new TweenMax down here on line four, TweenMax.to and we are going to be working with the ID sun band-1 first. Sun-band-1 and for this duration we can do, I'm going to say do four seconds, it is totally up to you for this one, this is just how you want it to feel, and for this we are going to be passing it the scale property. Scale, remember, one would just keep it the same, 0.5 would be half, two would be twice as big, so I'm going to do it at 1.4 and see if we notice that difference, whoa, we do notice the difference. The top-left is the transform origin and that's the default. We need to change our default, we need to transform origin and put that at once again, center. Now let's if we, yeah, that is looking much better, but we do not want it to stay that big. What do you think we have to do? If you are thinking we need to do a repeat, that is right. Let us do negative one so it repeats over and over. We are going to use negative one pretty much for everything in this because we want it to last forever, and then we don't want it to snap back like that, so what's the other property? We put a yo-yo on it and that's just true. Yo-yo defaults to false, so it's always there but it's just off, so now we see it go out and come back. You can maybe dip this down to 1.3 and we're only getting that first sun-bands, so let's get both. We have a couple of ways that we can do this, we can either add it just here in the same line so we can do sun-band-2 like that and we can watch them both grow. See how its zoom in real quick, see how they're both growing and shrinking because of the yo-yo, or what you can do, is you can remove it from there. Let's copy this TweenMax and put it on a new line, change this to two, and you can change something about the second one and have it go at a different speed, maybe it's shrink that to 1.2 and you'll see that one of them fires a little faster, the sun-band-2 is going to go a little faster on it's rotation, sorry, in it's scaling, and you see they go at different intervals and it's a cool effect. But totally up to you for this one, I give you these stylistic options, just showing you a few ways that we can create either one line or two lines, I'm just going to bring it back to one line and have them grow at the same rate. Totally cool, whichever way you want to do it just make sure you do one or the other. Once again, scale property works with integers, just when we keep it the same 1.9 or make it almost twice as big, you can even go 10 just makes it really big, totally up to you if that's what you want that's the look you're going for, rock on all right. But let's go for 1.3 here and for this we definitely want transform origin center. Before you go we just want to take care of one last thing, so you can see the highlight and the shadow and the shadow there all seem to say their the sun is over here, but it's right here on the left so we need to move it over. I know that this might happen some times when you might want to rearrange your SVG and rather than going back to Illustrator, sometimes it's a lot easier if you do it right in your JavaScript or in your code. We have two ways to do it, we can either change our code here from 183.9 we can just move it over to say maybe 1,200, or we can use a TweenMax method and that's what we're going to do. TweenMax.set is the method we're going to be using, so instead of two we're doing dot set and this just immediately moves the thing to where we want it to be without any animation. We're going to target that sun group with the ID sun group, and we don't give it a duration, there are no seconds involved because remember it's just immediate, and we're going to instead pass it the variable x, and let's try x 1,000. It's not going to be enough, we need a little bit more, I'm going to get it in the same spot but over on the right there. Let's go x 1,200 a little less, so let's split the difference and that's looking pretty good, so now the shadow and the highlight makes a lot more sense. All right, awesome, you learned a second TweenMax method, well-done. Great, now you know how to use the scale property. We'll be using it later to make the bird flap its wings and have the waves roll in and out, but first let's get our whole scene moving. 9. Sliding the Fence: In this course, we're creating a project that uses the parallax effect. Put simply, things that are closer to us appear to move faster than things that are further away. Our fence is going to move fast, our clouds will move slow, and the sun is not going to move at all. Let's get moving on this parallax effect starting with the fence. We're going to learn how to create a seamless animation as well as target two elements with one line of code. All right, great job in that last video. But as you can see now in our JavaScript, it's starting to get a little bit cluttered and we want to make sure that we're able to tell, just at a glance, which lines affect which elements. What we're going to do is we're going to create a little space at the top here, and we're going to use JavaScript comments. This is real simple. All we do is put two forward slashes just like that. This line, now that we started it with these two forward slashes, will not be run as code, so we can put anything we want here. I'm just going to put a little label here and just say Beach Ball, just like that. Then I do the same just above the sun code, two slashes, just going to put Sun. Then this way as we continue on, it's going to stay organized. I'll be able to quickly see where the beach ball is, where the sun is, if I want to change or edit that code. It can get real messy if you're not commenting your code like this. As promised, this video is going to get to work on the fence. Now, we are going to create a new TweenMax.to, because we're going to be animating this. We're going to select both fences at the same time, so we need to find out where are fence is. Here it is, fence 1 and fence 2. We do fence 1, oh, what am I forgetting? I didn't do hashtag, so it wasn't specifying an ID. But now we have the ID, fence 1 comma hashtag fence 2. Excellent. Now we want to choose our duration. Let's go for four seconds. Now we're going to move our fence from the right to the left, so we need a negative number first off. But now also remember, this is one of those that we're doing a seamless transition for, so we need to move this the length of each fence piece. If we look at our Illustrator diagram, if you choose the fence, we remember that it is 1,500 long and that is for a reason. It takes up the entire artboard. We need to move this completely over until it hits this edge and then it's going to snap back. We're going to be moving them on the x by negative 1,500. Let's see. That should look just like it did when it stops. Excellent. Then we just want to repeat that negative one, so that loops forever. Let's watch this. Pretty good. Looks pretty seamless, but what are you noticing? It has a weird ease. It's coming to that stop. That default ease is hitting us again. It's coming in and stopping. Let's grab our ease either from up here or we can go to the ease visualizer and choose the one we want. We don't want it to slow down like that. We want it to just go the same speed. It's like we're in a car and we're traveling the same speed. This will look really weird if we were in a car slowing down, it's like we're hitting red lights. We want that ease none once again. I'm just going to copy it from here and then put it right there. Now let's see how we are looking. Whoa, already that is looking much more like we are riding by and the beach ball's in the background rolling along and we are driving by in our car, bike, whatever you want to pretend we're on. Looking much, much better. Great. We gave our fence as silky, smooth, seamless animation. Plus, we're able to target two elements with one line of code. That will keep things tidy and easy to read. In the next lesson, we'll take the same concept and apply it to the water, rocks, islands, and clouds. 10. Sliding Landscape: We're starting to get the parallax effect going, but we need everything to be moving to really sell the illusion. Let's take the technique from the last lesson and apply it to the rest of the elements in our scene. Great so, now that we have this fence figured out. Let's take this same property and bring it over to the rest of the elements that we're going to be doing the same trick with. First off, let's start with the water. I'm going to make a little comment, water versus waves, and we're doing TweenMax dot to and same thing as up above really. I'm just going to type it out to get a little practice typing this in, and I recommend you doing that just so you get used to writing out the syntax of this. For the waves are going to do hashtag, lets find the waves, W-A-V-E. It's called wave group. Go ahead and do wave group. Let's make that happen over the course of 20 seconds. I want this to be a lot slower, a little smoother. Then we're going to give this an X of, we need to go to our Illustrator file and figure out how long is each element. This is a wave group, it says is 4,000 but let's actually look inside the wave group and see that we have these two inner groups inside. We have one group there and another group right here. Those are what make up these waves. You can see it's repetitive. There's the bump, the bump, the bump, the bump and this is 2,000 wide and so is this. They're both 2,000 wide, so that's what we're going to move and then allow it to snap back. You can see that as you move it over, it's going to fit in perfectly and then it'll snap back to here once it's moved over 2,000. We just going to replace itself. So x negative 2,000. Let's see if we get that to work. We see that it start to move over. Looking good. Let's actually speed it up so we can see the seamless transition and make sure it's working. Let's add the Repeat negative one. We should see it be completely seamless, even though it's going to slow down. That looks pretty seamless. Next, we do ease. I'm going to take this one out. You can copy it. But ease colon Power, capital P, Power 0 dot easenone. That should make our waves roll along. Just like the fence, but they're moving way too fast. So we're going to slow that down to 20, but they are seamless. Look how good that looks. I am loving it. I want that to take place every 20 seconds. Remember, where it start from is going to be fastest, the middle is going to be a little bit slower and then so slow all the way to the back. We want it to be very, very slow in the back. All right. We've got our wave set. We will make them gum in and out in another video, but right now I'm just getting everything to move to the side. Next, let's take care of those rocks. We want to do rocks. I'm going to do TweenMax dot to. Let's find those rocks in here. Command F, rock. All right. We have rocks 1 and we have rocks 2. See how naming can really help us out. Hashtag rocks 1 and hashtag rocks 2. Looking good. Let's make this take place over 60 seconds. I want these to move off screen over the course of 60 seconds, and let's make the x negative 1,500. I know this because I moved these so that they were 1,500 apart. These aren't like the waves or the fence where they're actually touching, but I created these rocks and then I created a duplicate. See as we drag over, 1,500 apart. Now that we have that, let's speed this up a little bit so that we can see the repetition, change the repeat, negative 1 so that i'st smooth. There we have it, its inside into place. Boom, look at that. It's a another seamless transition. We're going to bring that ease down to our rocks and we have it just gliding along nice and smooth. Excellent. We're going to bump this back up to 60 seconds, and then they're going to move a lot slower. Next, we're just rolling through these. Next, let's do the clouds. We're on the TweenMax. You can guess what we're going to do at this point. So clouds, clouds 1 and clouds 2. There we go. So hashtag clouds 1, hashtag clouds 2. Then, let's make this happen a little bit slower, over the course of a 100 seconds. We know we're going to be moving on the x, but we need to figure out how long this piece is. Width is 2,000, just like the waves, they end at the same spot. Since they're both 2,000, we're going be moving on the x by negative 2,000. Repeat negative 1 ease Power 0 dot easenone. Let's see how that's looking. Just for fun, let's speed it up to 10 seconds, just to make sure this is working and it's looking good. It will repeat seamlessly, I hope. Let's see. Here's the moment of truth. It went perfectly. So back to a 100 and the clouds are looking good. Last thing is this island back here or these islands. Let's set islands and TweenMax dot to. Let's see what our islands are called, islands 1, islands 2. Great. We want these to move slowest of all. Let's put those at 200 seconds. The x for these, since these take up the entire width of the view port here, and then they repeat, that's going to be 1,500. It's not exactly 1,500 here, but because I want them to repeat the exact length of the view port, that's what we're going to be setting that at. It's close enough and it should look just great. So x equal to negative 1,500, repeat negative 1 and ease Power 0 dot easenone. That's all looking excellent. For the sake of testing, make sure that those islands do look great. Yeah, they do. Back to 200, and there we have it. Wow, we've got so many things in our scene moving. It really feels like we're driving by the beach now, but that water looks a little stiff. Don't worry. We're going to get enrolling in and out in the next lesson. 11. Rolling Waves: We have our water moving to design, but it's not very convincing. Waves need to roll in and out. In this lesson, we'll learn how to shrink the waves on one axis so it looks like the waves are rolling in and back out out the sand. Let's dive in, so we have everything moving, but these waves are just sliding to the side and we want to have them go out and come back in a nice smooth way. Let's get another line of code for these waves here we're going create a new line because we want it to happen at a different interval than 20 seconds. I don't want it to take 20 seconds to go in and back out. So we're going to make a new TweenMax dot t o, and we're going to select the same ID here so hashtag wave, group, and you can definitely do this. You can select the same one over and over, but it's easier to add as many properties to one line of code is you can, rather than breaking out each of these into separate lines. But for this one, let's say it'll take five seconds for the waves to go in and out and then we're going to add a scale but we're gonna do a little bit differently from the way we did the sun. We don't want it to scale side to side. Also, we just wanted to scale on the y-axis so, we're going to type scale and then a capital Y and then I want it to shrink to about half the size of what it is. Let's see if we get that and there we go, it's shrinking down and you can see that it just stays there because we don't have a repeat. Let's go ahead and add a repeat, negative one and I want this to come back out and reverse the way it's moving so and do yoyo true. Let's see how this looks. Wave shrink and then they grow again after about five seconds. Awesome. Looking good already. I'm not loving the ease on this though it seems to go here, you might be able to notice it if we speed this up a little bit, the ease doesn't feel like a natural. There it is, you see that snap at the end there? It does not look very real. Let's get to our Ease visualizer on the GreenSock website and the issue really is that we have an ease out, so it slows down at the end, but it's real fast at the beginning so if we click the type here, we see easeIn, easeInOut, and easeOut. Let's see what easeIn does, see how it slow at the beginning and it's fast at the end. That's the opposite of that but let's try esInOut so it's going to easeIn and it will easeOut so let's see how that looks. Slow at the beginning, slow at the end. Nice. We see the wave here it goes slow to start, speeds up a little bit and then it slows down at the end. Let's try this ones. We want to copy ease, power one easeInOut, just like that. Copy this over to our scene. Here we are so we can put this right in here, ease, power one easeInOut. While it's pretty fast, you can still see it's much smoother, transitioning back and forth so that's already a huge improvement. Let's slow that down because the speed, it looks little unreal and let's see how that looks. That's looking pretty good. Now only one more thing. I want to transform this, not from the center of it, although it looks pretty good. I want to make sure we're transforming from the very top so that if we were to even scale this more, we wouldn't start to lose it. If we scale this down too much and we're going from the center, it starts to get lost and it goes underneath the actual rectangle that's there. I don't want that so I want it to be at 0.5 and let's make sure we are transforming from top center. Remember, the default is the top-left. Personally make sure we are transforming from top center, not a huge change to our result, but it's just good practice to have. There we have it, a little bit of transforming. We have a nice animation. Hold on transform origin. I noticed that the waves weren't moving and just make sure you're typing the right properties. A transform capital O origin. Everyone makes mistakes just about spotting them and figuring out what's going wrong so now that's looking like a good animation. That's a much more convincing animation. Scaling on one axis can really create some cooler facts. We don't have much left. Let's animate those surfboards next. 12. Sliding Surfboards: Surfboards in our project act is another point of reference for the Parallax effect. Plus they had a little character in the scene. We have two of them so we're going to use repeat delays to make sure that they're not in the scene at the same time. We haven't seen them in a while. You might have forgotten that they're even in this project, but we have these two surfboards that we're going to be animating to slowly move across our screen and act as another point of reference for that Parallax effect. So we are going to be using repeat, delays as well as an initial delay to make those go at separate times. Let's check that out. All right, so now in our code pen, we are going to create a new line here. Make a comment, surfboards and now we're going to start a tween max. But first let's find out surfboard one and surfboard two, right? So we have our surfboard one and surfboard two. Cool. Let's animate the surfboard one first. Tween max dot two hashtag because it's an ID surfboard one. We're going to be doing separate tween maxes for these because we want them to do different things. Let's have this take place over the course of 20 seconds, I think the beach ball takes place over 30, so we want these move faster because they are in front of the beach ball. Twenty seconds and then we're going to do our variables when x to equal a negative 2000, just to be safe to make sure that it is truly leaving the scene. We have something wrong. You see how the animation stopped. I knew something was wrong because the animation is not going for anything and it's because we didn't put a comma after the 20 seconds here and once you put that in, excellent. Now you see it moving along, it's moving right along. But you might notice it's lowing into a crawling messing up our parallax effect. We need that ease right? We need that power 0, ease none. We don't want it to slow down at the end. But we also do want a repeat, negative one. We don't want a yo-yo because we don't want it to go backwards. That would that doesn't make any sense, right? Now we have it moving across, it's looking good. It's moving on a constant frame rate. We want to now bring in that second surfboard. Let's go ahead and copy this line and change the ID to surf board two here saves a little bit of time, but we'll see that they're both moving in the same time and we don't want that. So you can pick either the surfboards. It doesn't really matter it whichever one you want to lead off with. I'm going to add the delay to surf board one and the delay means that it's not going to start for this number of seconds. Delay 20. I'm going to give the red one a head start and you can't see it. But right now, the green-blue one is off to the side waiting for 20 seconds and then once 20 seconds has gone, then this animation will start. We will see it here. Well, it should kick in any second, there we go. But here's the issue. This one's on a repeat and it'll continue to repeat and that delay has now expired because it's 20 seconds. Now they're going to be in sync for the rest of the animation. We don't want that, so let's put a repeat delay on, just like we did with the other animations. Repeat delay and we're going to do thirty-seconds, and we're going to make these both the same repeat delay. I'm going to copy this and bring this over here. Both my surfboard one and I'll throw this a little bit so we can see the differences. Both my surfboard one and two are moving off to the left to they have the same ease, same repeat. Surfboard one has a delay of 20 seconds it's waiting over there and they both aren't going to repeat immediately, but they'll both pause for 30 seconds and then repeat. It'll add a little bit of randomness to the animation so we see it coming in alone. That's nice. It's like the red is still all the way over here and we're going by a different surfboard. That's looking pretty good. Those look pretty good. The only thing left to animate is the bird. We'll get into that in the next lesson. 13. Flying Bird: Time you get this bird flying. We're going to use scale in a different way to make his wings flap up and down. Let's jump in. All right, so the last bit is getting our bird flying in. We see here in the code, we have the bird group, the back wing group, the bird body, and then above the bird bodies, the front wing group. We can select any of these to do our animations with. Let's go ahead and make a new comment here, bird and then start our TweenMax. I'm going to first start by having the entire bird group flying in. Okay, so let's do TweenMax.to, and just do hashtag bird. Then we're going to do that say over eight seconds. We're going to have it move to the left. Next, let's do just negative 2,000 make sure that it's definitely off the screen, and there it is. All right, so we are getting some progress, we see that our bird, he is easing out like that. That's all right. Birds might be fast at first and then slow down a little bit. That's not as unnatural, I'm not too worried about it. Now let's make sure that repeats, negative one, and let's do a repeat delay of about seven seconds so that it's not going to be constantly on the screen. All right, so right now not to natural looking, but that is all right. Still have some more stuff to do. So that's the entire bird moving. Now, I want to do a different animation where he dips down, and by different, I mean, I don't want it to take place over eight seconds. I want it to feel a little bit different so that each time he comes in, he might be coming in at a different height than the last time he came in. So TweenMax.to, same group bird. Let's make this take place over three seconds. Instead of going to the left or right, I'm going to have him move up and down. I'm going to say y: 200. Let's see how this looks. Yes, so he swoops down, but I love for him to come back up too. We're going to need to repeat, negative one and Yo-Yo. Let's see how this looks. He's coming back up, that's cool, but because we are using the default ease here, we are going to see it at some point, just hit the top and then snap down. So watching my dude here, he just bounces. Yeah, that's really unnatural looking so if you go back to our GreenSock ease visualizer, we still have this selected ease in, out. Let's see how that looks for him. Let's get rid of this repeat delay just for now, I'll bring it back in a second, but I want to see more repeats while we're working on him so that I don't have to wait for ten seconds to have him come back. So let's see him come through again. He is still flying off a little bit because we have that [inaudible]. Nice, he did not snap. That's looking way better. All right, now that we have that, let's get the wings actually moving. A new TweenMax. We're going to select back wing and front wing and I kind of them to fly in tandem, he shouldn't be lifting his wings at different intervals, so they can be in the same line. Front wing and hashtag, back wing. When we are going to save these, we are going to fire every second. Let's choose some variables. Basically what I want to happen here is I want this bird to do what? I want him to scale his wings down to [inaudible]. I want him to scale his wings down on the y-axis down to zero and then go the same distance, almost negative. I want him to do a scale Y basically all the way down and then come back up. That looks like he's in the down stroke and then I want him to come back up. That's exactly what we'll do. We will use the scale-Y property just like we did for the waves. But instead of just going down to half, we need to do with negative numbers. Let's say scale-Y. We're going to say negative one. I want to do a little bit further. It looks like he's pushing off or extending. What's the issue here? We have a bad transform origin. It started from the top-left and it flipped it. Let's do a repeat so we can see what's going on here. Yeah, see how it's doing a flap from the top. We want it to flap from the bottom. We want the origin to be like the bottom center or even the bottom left. To a transform origin and we can do bottom center. Let's see if this fixes it. Now we're getting that snap and we don't want that snaps, so we need to add that yo-yo. True. All right, that's already looking so much better. It is looking really good. I'm pretty happy with that. Let's see him fly back through. Let's shrink this a little bit so we can see him. Nice, and it's okay that he has that ease. I'm okay with that because I feel like that's kind of a natural feeling ease. As soon as they go up, they come back down. That looks real to me. If you want to add a different ease, go for it, that's totally fine. But he is flying along and looking pretty good. I just want to add that repeat delay back in here real quick. So repeat delay seven, so it doesn't have the bird flying in from the right over and over non-stop. Wait seven seconds and then come back through. All right, that's looking great. Our animation is looking really solid. Great job. This is it. We did it. There we are. A bird with a flapping wings and a fun flying animation. Great job. 14. Final Thoughts: Congratulations, you completed the course. If you had a great time making animations with me, I'm so excited to see your projects. Please post them on the student section on Skillshare. I want to encourage you to make tweets and make this project your own. For example, you could add more birds and have a whole flock swooping by, or you can make the ball bounce by moving it up and down like we did for the bird. Please comment and talk about any places you got stuck. I would love to help you out. If you take your new animation skills to other projects, please post those. I'd love to know what you're making with [inaudible]. Thanks so much for taking this course, and have fun animating.