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

4.4 Basic Interaction

Hello and welcome back to Animating with Snap SVG. In this lesson, we're gonna take a look at some basic interactivity. We're gonna create a click event so that when we click on this icon, we see a little animation. So as always, let's get started by copying the most recent folder, which is the site11 folder and we'll call our new folder site12 and all the changes we make in this lesson will be saved there. I'm gonna drag site12 down to my Brackets icon and then we'll open up the index.html file. Also before I forget, we'll jump over to Chrome and we'll navigate to the Site 12 folder. You'll notice I'm still using localhost, I'm no longer just entering in the path to that particular file. Instead, we've got our MAMP server turned on and we're pointing to localhost. So let's jump into our code and let's create some interactivity and this is gonna be very simple, easy to do. We've already seen the use of callback functions, for example, in our load method. We have a callback function here that runs after this icon-house.svg file finishes loading. Well, our click event is gonna be very similar. We're gonna create a click event so that whenever we click on an item, it's going to trigger a callback function, which is going to perform whatever actions we want. So after we create our house, our background and our ring, we'll skip a couple lines and we'll create our click event. So we want the click event applied to the whole icon itself, so we're gonna point to icon dot and then click. And then inside parentheses, we're going to create a function just like we've done before. So we need to make sure that for our function, we have our opening and closing parentheses and then our opening and closing curly bracket. And then don't forget your closing parenthesis for the click method here and then a semicolon to end that statement. So inside this function, we can add whatever we want to. So let's do a window alert again. So window.alert and we'll just say, ("CLICK"). So we'll save our file. Jim back into our browser and refresh the page and now when we click on our house, we get a pop up that says, CLICK. Easy enough. So now as you can imagine, instead of doing an alert, we can do an animation. So let's build an animation for this particular item for this icon. So when I click on the item, I want two things to happen. I want the ring around the outside to grow a little bit and I also want the house symbol to animate. So let's start with a house symbol and then we'll get to the ring afterwards. So I'm gonna point to house and then we're going to do a .animate on the house and I'm just gonna scale it a little bit. So inside the curly brackets, we're gonna do a transform: and then we're gonna use a transformation string like we've done before. So we'll do 's' to scale it and let's scale it up just a little bit. Let's do maybe 1.2. Let's try that and then how long do we want it to take? We'll put a comma after that closing curly bracket. And let's say we want it to take half a second. So 500 milliseconds and then we'll close our parentheses, semicolon to end our statement. Now remember that when we're doing a scale transformation, we need more than just the size we're scaling, we also need the origin point. So we need to include an X, Y coordinate of where this transform is going to happen. We want it to happen at the very center of our object. Now the natural width and height of our SVG object is 200 pixels by 200 pixels. So let's put our scale right in the middle or our origin of that scale right in the middle by saying, 100, 100. So let's save that, jump back over to our browser and refresh and then when we click, we see our animation happen. Now that animation was kind of boring, let's make it a little more exciting by adding some easing. So after our duration, we'll say, comma space and I'll do mina.elastic, save that, refresh. And now when we click, we get something a little more exciting. Refresh, click and that looks pretty good. So now let's also do an animation on the ring and it's gonna be very similar, so I'm just gonna copy this line of code and past it on the next line. Except instead of the house, we're gonna be animating the ring and everything else, let's go ahead and try it as is. We'll do a 1.2 scale. We'll save that and refresh, click and there we go. So maybe that's a little too much for the ring, so let's bring that down to 1.1 and see how that looks. Save that, refresh and that's still too much. So let's bring this down to maybe not very much at all. Let's try 1.01 and I just realized I'm editing the wrong thing, so let's leave this at 1.2. Let's bring the ring down to 1.1. Save that and refresh. And when we click, there we go, that's a little bit better. Let's bring it down even more. Let's do 1.05, save that and refresh and then click and there we go. That's kind of what I was going for. So refresh, click and that looks pretty good. Another thing we might do is animate the opacity of the background. So we could go to the next line here and do bg.animate. And this time instead of a transform, we'll be doing opacity and let's bring it down to maybe 0.5. So then we'll close our curly brackets. We want it to take 500 milliseconds as well and we don't need easing on this one, we're just fading out the color a little bit. So we'll close our parentheses, semicolon to end our statement. Save our file, refresh our page and click, and I don't know if I'm crazy about the results. Maybe we will bring that up to 0.7 and make it happen a little faster. Maybe down to 200 milliseconds. Save that, refresh and click and there we go. That looks pretty good. So that's how you can create a click event in Snap SVG and have it call a function that will perform whatever actions you want to perform. It doesn't have to be an animation, you can do anything inside this function, but that's how you create an animation that responds to a click of it. Thank you for watching and in the next lesson, we'll talk about how to do the same thing for a hover event. I'll see you then.

Back to the top
Continue watching with Elements