Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:27Length:2.8 hours
Snap 1
  • Overview
  • Transcript

3.1 Animation Basics

Hello and welcome back to Animating with Snap SVG. In this lesson, we're gonna get started on what we've been waiting for this whole time, and that's actually animating the items within our SVG. Now that we understand how to transform our items by applying translations, rotations, and scales, we can turn those into animations very, very easily. So I'm gonna grab our site06 folder and make a new copy of it. And all of our changes in this lesson will be saved in the site07 folder. So I'll drag that 07 folder down to brackets and we'll start by opening up the index.html file. So here we have some transformations. If you remember we have specific letters that represent different types of transformations, the t represents a translation or movement. The r represents rotation. In the scale or the s, excuse me, represents the scale. And you can combine those however you want to inside a transformation string. Or we can also use a similar syntax to animate different attributes of our house or our shapes within step as Fiji. So let's say we wanted to perform a simple animation on the house itself. So we could do house and then there's a handy function called animate. So in our animate, function we need a couple of things. First of all, we need an object that's going to contain the transformations. And that object is gonna be contained inside curly brackets, so I'm just putting the curly brackets there first. We're eventually gonna put something inside those. And then we're gonna type a comma and a space. And then we want to enter in the duration of the animation. Or how long we want that animation to last. And this duration is gonna be in milliseconds. So if we type in 1,000 here, that's going to represent 1,000 milliseconds or one second. So then we'll close our parentheses semi-colon to end our statement. Then inside the curly brackets we can apply our transformations or our animation So I'm going to type in the word transform colon Space. And then inside quotation marks, we can say what exactly we want to transform. Let's say we wanted to rotate our house 45 degrees, we're going to use that same syntax, R forty five. Let's see if that works what save our, and let's jump into our browser and navigate to site07/index.html, and run it. And you'll see that nothing happens here. And the reason nothing is happening just yet. Let me get rid of this. Web developer tools here. And the reason nothing's happening here is because when you perform an animated rotation in Snap.svg, we need to include not just the angle of rotation, but also the origin point of the rotation. So let's say we wanted the origin point to be 00 or the top left corner of the stage, or the svg element. Let's Save that and Refresh. And now we can see the animation taking place. If we wanted it to rotate from the center of the base. Then we could do that as well. So the base is located at 50, 100, and it's 100 pixels wide. So if we want to get to the horizontal center we would take 50 and add half of the width, which is another 50. So We would put our X coordinate there as 100 and our Y coordinate is going to be something 0.5, let's just pick a number. Let's just do 150. We don't have to be exact here. I'm going to save that. Jump back to our file and refresh, and now we see that it's rotating roughly from the center of the shape. Maybe move that rotation up a little bit. Save it and rotate again. And there we go. So you can change that point of rotation using these two values here. Well let's take a look at translating or shape or moving or shape. If we type T, 100, 0, then will translate it one hundred pixels to the right so let's say that, and refresh. And we see it move from left, easy enough. But what about our scale? Let's try S2. Save that and refresh. And again, nothing happens because it wants the center point of that transformation. So we'll do S2, and then I'm just gonna do 100, 100. Save that and refresh. And it scales up from that center point or that rotation point. If we were to scale it up from 0, 0, it would be a different animation because it would scale up from the top left corner. So if we save that and refresh, then you see it growing down into the right as it expands out. Now we can combine these transformations just like we could when we were originally transforming them earlier. So we could do a scale, we can also add a rotate in here. So we could do R45, and maybe do comma one hundred, comma one hundred for the rotation point. And then maybe a translation as well. Move it over a hundred pixels. So, we'll do 100, 0. So let's save that and refresh, and it doesn't number of different things at the same time. So you can, again combine those transformations in any way you want to using this transformation syntax. Now, we can do more than just the simple transformations. You'll notice that we can transfer. In fact I'm going to before we do that I'm going to just copy this line of code and paste it again. And I'm just going to comment out this first line. So that you'll still have it there for reference. But it will be turned on anymore. So I'm going to get rid of the transform, and instead of doing a transform, let's say we just want to animate the height of our house. So we can type in height: and let's animate it up to 300 pixels tall. We'll save that. Jump back into our browser and refresh. And you'll see that it doesn't work. And the reason that doesn't work is because we can't perform this type of animation on a grouped object. Now if we were to jump in and grab one of the items within the group, we could do that. So if we were to point to base.animate, which again is this rectangle up here that represents the base of the house We could do that. So if we save that and refresh, then we can see the height of that base element expanding out. But again, there are some limitations there. And we cannot do a height transformation on a grouped object. But those are some of the basic animations that you can perform in Snap SVG. Thank you for watching, and I'll see you in the next lesson.

Back to the top