7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 13Length: 2.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Animated Responsive SVG Logo

Hi, this is Kezz Bracey for Tuts+. Welcome to the first project in 10 CSS3 branding and presentation projects. In this first project, you're gonna learn how to take an SVG logo, make it responsive, and give it an animation. You'll be working with the logo that you see on your screen here. So in the related links section below this video, find the link to this base pen. And fork that into your code pen account. So we're gonna make this logo responsive first, and then once it's responsive we will add in our animation. Now, if you change the size of the screen down below the width of this logo. It'll just get pushed off the screen, but the whole idea of you using SVG is this should be able to scale uniformly and not lose any quality at whatever size you wanna display it. And to allow that scaling to work, we're actually gonna have to edit some of the HTML. And while I know that we're working with a CSS3 project, in order for our CSS to work, we have to make a couple of tweaks to our HTML code. Now, when you have SVG code, sped up from a design program like SketchUp. Typically, you'll have a width and a height explicitly stated in this SVG element. And you'll want to actually remove those, so that the width and the height can become fluid values. The next thing that you wanna do is add the attribute preserve aspect ratio. And set it to xMidYMid and meet. Now, we already have our SVG logo inside our responsive div. Our record class, if you have a look down here is set to a width of 100% with a max width of 35 rim. So what the means is this wrap up will go no larger than 35 rim, but if you get down smaller than 35 rams of available width on your viewport, it will always just display at 100% of the available width. Now, this is the CSS that's giving the responsive sizing to the container around the SVG. And now, that we've changed those couple of attributes in the HTML, that CSS is gonna be able to work. So this time, when we squeeze it down, that will just shrink down as small as you want it without losing any quality. So that's all you need to do to allow the responsive part of the equation to work. And now, we're ready to add in our animation. For our first animation, we're gonna make these black triangles at the back of the logo spin a full circle. And we're gonna have them appear to grow from nothing. So we're gonna crunch them down to zero height and width. And then have them grow up to their regular height and width. And at the same time, we're gonna have them spin in a circle. The tricky part is we actually already have a slight rotation on our triangles. If we have to look in our SVG code here. Now, this path here is our back triangles, we've giving it an id of back_triangles. So that we can target with our CSS. If we go down right here, you can see that we already have a transform being applied to these triangles. We have a rotation of -38 degrees. Now, the trouble that we can run in to is if we start applying other transforms through our animations, it can conflict with the transform we have put in our SVG. So what we're gonna do is get rid of that transform and we're gonna put that transform back in place inside our CSS instead then we'll have sort of a blank slate that we can do our animated rotations from instead. So we'll delete that transform. You see the rotation has reset itself back to zero. Now, we'll reintroduce that -38 degree rotation with some CSS. And we're targeting that back triangle's ID and we're using transform to rotate it to -38 degrees. But what you can see here is the rotation has gone way up here. And that’s because it has rotated the shape around the wrong point. So every time you do a rotation with a transform, it goes around a certain axis. We want that rotation to go around the center of our logo. So to make that happen, we're gonna target the path element that's in our SVG, and we're gonna set its transform origin to 250 pixels by 250 pixels. So this is the horizontal position that our rotation point should be at, and this is the vertical position. The x and the y position that we want that rotation to work around and we've set those positions because our logo by default is 500 by 500 pixels wide. And so now, our rotation has left those back triangles in the correct position. Now, there's one peculiarity with setting transform origin that you need to be aware of. You would think that you'd be able to put 50% by 50% to have that rotating point placed vertically and horizontally in the center. And you can with most browsers but right now there is a bug in Firefox where, if you do put in percentage values against transform origin. It's just not gonna work, so you do need to use pixel values there. And everything might not at first be intuitive is even when your SVG logo is displaying a size other than 500 by 500 pixels. The centering for this transform origin is still gonna work even though it's not using a relative unit, even though it's using fixed pixel units. So as we shrink this down that's not going to influence that transform origin point. Now, that we've got our rotation all set up, we can add in the animation that we're gonna apply to our back triangles. So we're using @keyFrames to specify that we are defining an animation. And we've given our animation a name, back_triangles at 0% of our animation. So this is at the starting point of the animation, we're setting the transform on those back triangles to use a scale of zero by zero. Now, with the scale transform, the first value is gonna control to width of the item and the second value is gonna control the height. So that's just gonna mean that at the start of the animation, those back triangles are not gonna be visible because they have no height and no width. And then we're also gonna set the rotation to 322 degrees. And that's actually full 360 degree turn from our initial -38 degree rotation point. So it's just making it do a full circle from where we have it starting. Then by 100%, where bringing the transformer up to a scale of one by one. And so that means on the horizontal, we'll bring that up to a full width. So we'll have a one to one ratio of the original width and the same thing applies with the height. We're gonna have a one to one ratio with the original height. So that's just bringing it back up to full width and height. And then at that point, we end the animation on the original rotation. So now, that our animation is defined, we can use it inside our back triangles style. So we deploy it with the property animation, we then specify the name of the animation that we want to use which is back triangles from here. We give it a duration of 2.5 seconds that we want it to run. And we set the animation timing function to ease out. And that ease out timing animation function just means that it's going to go a little slower towards the end of the animation. Let's watch the first animation run through, we'll just refresh the page. And that's it. So we've got our back triangles going from their zero by zero scale size up to the one by one scale size, and doing a full circle spin along the way. And now, we can apply the same process to our front triangles, to our orange yellow triangles there. Once again, we're gonna remove the transform that's already applied directly to our path. So we're looking for the path that the id front_triangles. And then on the end of that element, find the transform that's already applied there. And delete that. And now in our CSS, you will add in our transform to get that rotation back to where we need it, -38 degrees just like with our other triangles. And now, we can add in the animation for our front triangles. This is almost the same as the animation views for our back triangles. Only this time we're putting a bit of a delay on it. So that we get a staggered effect. So the front triangles don't start coming in until 20% of the way through the animation. Before that they're just kept at no height and width with zero opacity. So that way we can give both of our animations for our front and back triangles the same duration. They'll both finish at the same time, but it'll give an effect like the back triangles are starting off before the front triangles. And the only other difference is we wanna have the front triangles rotate in the opposite direction to the back triangles. So with our back triangles animation, we started them at rotation of 322 degrees and finished at -38 degrees with these we're starting at -38 degrees and finishing at 322 degrees. So that's gonna make them spin in opposite directions to one another. So now, we'll apply that animation to our front triangles. We'll use the same syntax to deploy it. So set animation front triangles, duration of 2.5 seconds with an ease out timing function. And that's exactly the same as with our back triangles. We're just using a different name, just calling it a differently named animation. We'll save there. That's what refresh is. And there's our two sets of triangles. You could see that staggering effect where the yellow triangles seem to start their movement just a little bit after the black triangles. And now we can put together the last part of our animation which is to animate the a in the center of our logo. We're gonna have that grow up from zero height and width too but we're gonna have it do a little bounce when it gets to the end. So we'll define our animation. So we've called it letter a. We're gonna start that letter at zero height and width and zero opacity. Halfway through the animation, we're gonna have it still be zero height and width, but we're gonna give it an opacity of one. So it'll be fully visible as soon as it starts to get size. And then between 50 and 90%, we're gonna have it grow up in size to a scale of 1.1 on the horizontal and 1.1 on the vertical. So that means it's gonna be 1.1 times larger than its ordinary size. So just a bit bigger than usual. Then at 100%, we're gonna bring it back down to its normal size. So it's basically gonna zoom out from halfway through the animation duration, get a little bit bigger than it should be and then just bounce back in to place at it's normal size. Let's apply that animation to a style for our letter a ID. So just like you saw with the other animations, we have got the animation property. Bringing in the letter_a animation, using a duration of 2.5 seconds, just like the other animations. This time we're using a timing function of linear. Now, linear timing function means that there's not gonna be any speeding up or slowing down at any point throughout the animation. Everything is just going to run at a consistent speed through out. So let's refresh that and watch our entire animation from start to finish. There we go very cool, and this is all still fully responsive even with the animations there. Let's say, I reduce the size of our wrapper to 25 rim, that's still gonna run just the same at the smaller size. When you're done creating your animated SVG logo, we would love to see what you've created. Especially, if you put in any tweaks and unique aspects of your own. You can tweet your completed pens through to us at #10CSS3projects. In the next lesson, we're gonna be using CSS3 to create some repeating background patterns. To make background patterns like this in the past, used to have to get into Photoshop or a similar program. And make up some little 10 or 20 pixel GIFs or PNGs that you would then repeat in your project. And then if you wanted to change anything later, you would have to go back into your software. Edit and re export your GIFs, reupload them to your website, and so on for every time you needed to make an adjustment. With CSS, you can do some really nice looking basic background patterns, and if you wanna change something, all you have to do is get in and edit your code. And you'll learn how to do that in the next lesson. I'll see you then.

Back to the top