Transcripts
1. Welcome! Intro to the classes: Have you ever wanted to make your designs alive or maybe you heard about creative coding, but didn't have a chance to dig deeper. Hi. My name is Agan. I love to show you something very exciting. Animating SVG with a simple CSS. I can't wait to show you the magic that comes from combined SVG and CSS. CSS is a coding language. You can style websites with it. You can do the animations. While SVG is a vector graphic format. If you don't have experience in coding don't worry I try to explain everything step by step, so you can follow the classes.
2. Goals of the classes: The goal of the course is to show everyone interested in graphic design encoding that SVG and CSS combined together are great tools to make fun animated elements on the Web. You don't have to be experienced developer or designer to make use of it and take the greatest advantage. The end result of the course will be animated graphics coded by yourself. The code is destined for people who likes coding, designers who'd like to animate, do vector projects with the code, everyone who likes to create things on the computer and Web.
3. Tools: For these classes, we're going to use a couple of tools. First one, your favorite browser and its dev tools. Dev tools are part of every web browser and helps you to debug your code. I'll show you later when to find them. Second tool, is a code editor. If you haven't already used any of them, I'd recommend Atom or Sublime Text. Currently, I use Atom. It's free editor you can download from atom.io and is available for all the systems. The last thing we need is SVG file. You'll find the SVG files in the package that I'm sharing with you.
4. Materials: Remember to download the package with all the materials like HTML files, the solutions to my challenges, and SVG files. We're under your project section and on the right you can see attached files. Please download this package. The package consists of several folders. You've got HTML template, which is basically a simple HTML template where you can paste your SVG code. You can also see SVG files, so different SVG graphics I've prepared especially for you. You can animate some things out there. We've got money, eye, and some other things. You've got also eye-exercise and the exercise that I'm explaining in the video including happy-face, you got the solution to the eye-exercise and you can check out other fun SVG animations for inspirations.
5. Intro to SVG: Before we started dabbling in code, let's find out more about SVG. SVG stands for scalable vector graphics. It's an XML based vector image format. Today SVG is used for everything. From logos, icons, iconographics to animated content. SVG can be controlled by CSS; what we are going to take advantage of in our classes. As mentioned SVG is vector graphics. It means it's crisp and beautiful no matter what the resolutions are. You can change its height and width, and it won't affect its quality. So, summing up the key SVG features are; SVG is scalable, it scales up and down without losing quality, SVG is vector graphics, SVG is crystal clear, SVG is controlled by CSS, which makes easy for us to have fun and implement some simple but eye catching effects.
6. Intro to CSS (only for non-coders): This lesson of the course is focused on people who haven't had the experience coding in CSS. If you're already familiar with styling the elements in the website, you can skip this part of the classes. So, let's start with the question, what is CSS? CSS is Cascading Style Sheets. Is a style sheet language used for styling the elements on your website, which are placed thanks to HTML. CSS describes how elements should be placed, how they should look like, et cetera. We can also animate the elements, which is the thing that we'll focus on during these classes. So, what about CSS syntax? On the right side, you got the CSS file. A CSS rule set consists of a selector and a declaration block. The selector, actually selects the content you want to style, it pines to the HTML element. So, in this case we want to style P, which stands for paragraphs and in our HTML, it's on the left side. You can see that we've got paragraphs. P here, and P as a selector in styles sheet. The declaration block consists of one or more declarations, and they are separated by semicolons. Please remember about them. Every declaration consists of property and its value. So, for instance font size, color, margin-top, and text-align are properties, and they have their value defined. There are different types of selectors. First one is the element selector which selects element based on the element name in HTML. It is what I was already mentioning. Here we've got the elements selector P, and it selects all P's, all paragraphs in HTML document. So, in our case all paragraphs will have font size 15 pixels, color pink, margin top 30 percent, and they will be aligned to center.You can see that the paragraphs are pink, and centered align. Another selector is the class selector, which we're going to use very often in our course. So, please stay focused. The class selector, within here, selects elements of the specific class attribute. To select elements with a specific class, you have to write a period, and the name of the class. In HTML document you have to add attribute class, and name, you add it for the class in CSS, so highlight it. The paragraph with the class code highlighted has now a light grey background. We can change it to different color. The last sector is the ID selector, within here. The ID of an element should be unique within a page. So, the ID selector used to select one unique element on the whole website. To select an element of the specific ID, we write a hash, and then the name of the ID. So, here if we want to have the heading, with a bigger font size, we can add ID attributes, and the name of this ID. So, we have the intro. If we refresh the page we can see that heading has ID intro. Thanks to this our text has font size 20 pixels. So, for the quick revision, we mentioned three different sectors in CSS; elements selector, class selector, and ID selector. In this course we're going to use class selector very often. Remember that dot stands for class and after dot we need to define the name of the class in CSS file. In HTML we have to add to the given element, the class attribute, and the name of the class. Of course we can add classes to multiple elements.
7. SVG code: Let's have a look into SVG code. We can open every SVG file in code editor, and we can see what's out there. I'm using Atom, and as you can see, we've got a SV code. As mentioned, SVG has XML based Vectra Graphic Format. It's similar to HTML. If you're familiar with the syntax, you can see their similarities. We've got different elements like circle and path, and they describe our shape. So, let's open SVG in the web browser and see how it's rendered. If we open dev tools, you can inspect every element of SVG. Why it's so cool? The biggest advantage of it is that we can apply styles and change it, we can animate some elements or hide them, gives us tons of possibilities especially when we combine SVG code with simple CSS animations. How to do it? Let's check out the next lesson..
8. Embedding SVG in HTML document: Actually there are several ways of embedding SVG to HTML file. Will be whizzing one that enables us to use CSS animation very easily. We've got index, and we've got emptystyles.css. To attach stylesheet to our HTML document, we need to add link tag. As you can see we're referencing it to the directory where our styles are. Our styles are in CSS folder. So, this is why we've got this path. Of course, we have to save it. If we refresh the page nothing happens because HTML document is blank. Let's copy the whole content and paste it between body text. We can remove the first two lines because they're not necessary. Let's refresh the page. As you can see, our SVG file is embedded in the document. If you want to change the size of it, you can add the class, we can remove ID, and instead of looking at class for instance, copy paste. So now, we are able to add new class to our CSS stylesheet. Do remember, how we should construct this kind of selector. Well, class always starts with a dot then the name, "Happy Face." As you can see editor coded that your already gives us some hints regarding the link. Okay. So, let's define the height. For instance, we want to have it as 500 pixels. Let's refresh the page. As you can see, the size of SVG file has changed.
9. CSS Animations: Let's focus now on CSS Animation. Although it's a quite complex topic, we'll be using only some part of it. If you'd like to find out more, there are tons of different classes and courses. I'm going to show you the most useful things regarding CSS Animations. So we define CSS Animation in our styles.css file in this stylesheet. So we create CSS animation by using keyword which is keyframes. The keyframes is followed by the simple name. For instance, let's add bounce. Each animation consists of breakpoints. It means that we define progress of the animation by percentages. We've got zero, we've got for instance the half old animation, and what's happening out there, and the last point. Of course, you can define different numbers whatever depending what you want to achieve. Because it's bounce animation, we would like our happy face to be bouncing. Bouncing it's moving up and down. So let's learn about transform. Transform is a CSS property, and as you can see as Atom is giving us a hint, there are different options which you can implement to your graphics, like rotate, like scale. You could also use translate in different axis. We've got X, Y, and Z. If you would like to move something right and left, we'll use translate X. If you would like to bounce something up and down, we'd use translate Y. Let's say that we would like to have our happy face bouncing up by 50 pixels. We can for now get rid of empty breakpoints. The animation is created, so let's have a look into our index HTML. We've got our SVG file which is here, and we've got class happy face. We want to add to this class the animation. So, let's get back to styles. So we have our animation already created, but it's not executed yet, nothing happens, let's check. The happy face, it's not moving. We have to add the animation to our selector. So as mentioned, we already have the class created. Remember that class starts with a dot in a CSS file. Here we got our name. So, how we execute the animation? We have to add the CSS property which is animation name. Our animation name is bounce. Later, we have to define the animation duration. Let's have one second. Of course, you can create other timings like five half a second like which would stand for 500 milliseconds, but our animation will have one second duration. The last important thing is animation iteration count. So how many times the animation will be repeated. For us, we'd like to have it infinite. Our face is bouncing, and let's check it with dev tools. So, this is our element which has happy face, and this element has animation to find. If we uncheck it, the animation will be executed. It means that this line of code is commented. So, web browser that will read it. Of course, we can create more complex animations. Let's have create another break point. We can also use transform, and we can scale the element. One stands for a 100 percent. So, the element remains the same. If we want to have it large by 50 percent, we have to add.five. It means 150 percent. We can also rotate the element by 10 degrees. Remember that we defined the rotate by degrees. Okay. Let's save. Remember about saving, and let's refresh our index HTML. Wow! This animation is bounceful, but you can experiment with it.
10. Animating selected parts of SVG graphics: In the previous lesson, we were animating the whole SVG element. As you can see the class is added to the SVG tag. So, the whole happy face was bouncing. What about animating a particular part? Let's have a look. The end results we would like to achieve are the parts of the eye moving. As you can see, the white part is stable, and only the center of the eye is moving. So, let's start with the beginning. In the package that I'm sharing with you, there is eye exercise folder. You can drop it on atom, and it will open. We've got index, and styles CSS. In the index, as you already see, there is SVG code. So, the eye should be generated. Let's open it. The eye is stable, it's not moving. So, we need to add CSS animation in this style sheet. Our style sheet has already some basic styles which adds pink color in our background, and set the size for the eye. So you can add your styles below line 20. Okay. We would like to have this part moving. So let's use inspect. As you can see, this g stands for group. This is group element. It has already its ID, but maybe we can add class. Let's find it in the HTML. This is this group. I'm commenting, "This is the part that is going to be animated." We can add "Centre", to add the class "Eye center", and we should add this class to CSS. But what would have to do right now, is to differend the animation. If you remember, the eye was moving a little bit to the left, a little bit to right, into the bottom, and it was getting bigger. So, let's try in it this type of movement. Let's create animation, remember that it's starts with keyframes, moveEye. Remember that if you would like to have more than one word, the best play is to use camel case. Okay. So, let's say that 20 percent would like to translate, in the x-axis to the left, so minus 50 pixels, and by 40 percent would like to go down. So transform. TranslateY minus 30 pixels. I'm just guessing the numbers for now, it will check it soon. I would like to scale it as well, by 20 percent let's say. We're saving, and refreshing. As you can see nothing is happening. The reason why is that, is that we should execute the animations. So we should add this to our eye-center. Animation name, moveEye, animation-duration one second, and animation-iteration-count infinite. Save, and refresh the page. As you can see the animation is too fast, and the number of pixels should be changed as well. Maybe we can change this to 20 percent, and to 10, and change animation-duration to three seconds. This is much better right now. We can also tune this a little bit. So the scale would be 15 percent, and the duration will be four second, I will also change that breakpoint to 60 percent. Let's see. We are getting closer. It's pretty similar, right? We can also make this circle disappear. Let's find out it. Well, while it's moving, it's pretty difficult to get it, so let's comment the animation for a second. Let's find, we've got it, almost there. So this circle defines this white circle in the eye, this one. We can also add the 'Plus other" getting to index HTML, and add class. Here's already the class STO. Or we can add another one after space. So let's say, you can find a solution to this challenge in the package, eye-results.
11. Codepen - useful tool: Thing I would like to mention is that Codepen platform. If you don't like to work on HTML files using Code Editor, you can use Codepen. It's a platform where people create short snippets. Just lets have a look. We click new pen and we've got HTML window, CSS and JS. So, let's work on the example. You can take chosen SVG file and open it in atom. We copy the whole SVG code and paste it to HTML. As you can see, the SVG is generated. We can add the class, type of face. You create a class in the CSS window. As you can see, everything is being refreshed. So, it's very easy to work on. Of course, we can create animation here. Setting the breakpoint, opacity would change to zero, and of course we need to apply the animation, and the animation works. You can save the code by clicking Save, and you've got the URL, which you can share with me in the class project. I'm wishing you all the best and keeping fingers crossed for your projects. Let me know how's your work with as SVG and CSS animations. Good luck!
12. Class Projects: For the class project everyone is encouraged to select one vector graphics in SVG format and create their own animation. The SVG files are available in the package. Designers are also welcome to use their own SVG artwork. Download the course files under Your Project tab. It's placed on the right side. Apply your own CSS animation to the chosen SVG file. You decide what will be animated. Show us your work by sharing code snippets, screenshot, or videos, or you can send a link to the Codepen you created. Feel free to ask any questions in the community section. Goodluck. May CSS animations and SVG be with you.
