 But anyway, that's that's the back story. We're not going to worry about that so far. So who said CSS cons? Yeah, okay, you guys can go to sleep Yeah, that's the thing I have no idea how I'm gonna fit a half an hour talking to the few minutes, but yeah, let's see how it goes I'll just I'll just I'll just probably cover the first part of it and the second part you guys can look at the video anyway Who knows about SVG's and CG animations CSS Okay, fine. Let's go. Let's go from the beginning. Hey, I'm Zell. I wrote two books for the record This is me on my website freaking long name. I have no idea what I'm thinking. I'm gonna change it soon So slides for this is on this link as you can see Basically the overview will be some simple SVG stuff that the simple ones We're gonna go into basic animations and some some things slightly more complex I don't think we have the time to do the cool real-world usage though. So please check out the the video So basically the basics Why SVG because it has good browser support installable and what I love it is that it's scalable So you don't have to worry about being this or what fix the lights There are a few ways of using SVG's like the image tag the background image pattern Using as an object, which I don't see anyone using any more I think then the last one which I love which is inline SVG There are a lot of others But we won't be covering that the the main one to use if you are going to animate it as to use inline SVG's Because that's the that's the only one that allows you to use any kind of animation methods and it will still work All right. So quickly animation methods. There are three animation methods CSS SMIL and JavaScript Browser support. That's the first thing everyone asks If you are using CSS animations, you can go back up to IE night as long as transitions or animations are supported You're fine. SMIL you can use it in Internet Explorer or Opera Mini. So if you have to support those browsers, then please don't use SMIL Otherwise use JavaScript Probably not so not supposed to talk about it in the CSS meetup But I'll cover that. So basically the the initial part will be translations and rotations Just like to show you the difference between the two because rotation is a lot more complex in SVG compared to normal HTML elements All right. This is the SVG that we're using as basically the rectangle you see over here without any animations Not going to go into code pan. So Animating of CSS You only use CSS animations when it's simple for you to animate but you don't have a lot of complex timing functions And you want to animate properties that only CSS can animate especially when using SVGs One of the properties that CSS cannot animate for example is the path property the D property in SVGs We'll talk about that later if I have time. Anyway targeting SVGs You can target the normal SVG element just like the diff thing and it works If it's just the SVG element, then you treat it like a normal HTML element But you can also target the items within the SVG by just saying SVG rekt. Basically, however, you target normal tag elements Though the how they behave though is totally different from HTML elements So let's take a look at a simple one Translations move from left to right basically if you say Transform 100 pixels, which is which basically you guys should know not too much of a problem You can also use some animations in Addition to translations. The only thing is to use the keyframe syntax But when it comes to rotation all hell breaks loose if you say Rotate 360 degree. If you take a look at my mouse and how it rotates It goes out of the box and it comes back in so what this is happening is that for SVGs, right? it actually animates around this origin point on top left corner, but for Normal diff elements it animates like the center point of the element itself, which is why this is slightly confusing One way to fix it is to set the transform origin to 50-50% and it works perfectly fine in Chrome and in IE and Safari, but this breaks in Firefox Because Firefox doesn't allow you to use percentages transform origin if you want to you have to use pixels, which I don't think we want to use it anyway, so That's the basics for CSS and now let's go on to SMIL SMIL is when you want to use simple animations again because complex animations will take a hell of you and You need more control compared to CSS Because CSS you can only trigger animations on hover or with the keyframes With SMIL you can use things like click or click plus one second or some other thing and you may wait for how many seconds Then this thing animates again, so this is one of the benefits of using SMIL and If you need IE or prom any support, please don't use SMIL you're going to kill yourself The way to use SMIL animations is to use the animate tag You can use it in either one of the two ways meaning put the animate tag within the SVG element itself Or you can use an ID and link to it So the basic animate tag has four attributes the attribute name Which is the thing that you're going to animate the from and to and the duration Okay So SMIL translation here we're going to translate x which is the x value on the left to right from 50 to 150 One seconds when I click on it So this is how it works. You can click any number of times and the animations will repeat by itself There is also a second way of animating SVG elements and that's with the animate transform tag so this animate transform tag uses the translation thingy like almost like CSS transforms to to transform the box So you use the attribute name as transform and this will give you a new type of Translate then you will say x and y to x and y duration and begin and stuff like that Okay, basically it's going to be the same and In rotation well once again This is this time you're going to use type rotate But once again, you're going to have the same problem of it animating outside of the box Because it's going to animate around the top left corner again How we can fix this is to set the origin point by calculating it yourself To say a hundred and hundred which is the center of this SVG box over here And now if you click it it rotates But of course you can't use it on IE or opera meaning So if you want to rotate SVG elements, please use JavaScript even though this is a CSS meetup Yeah If you want to do more than one animations you have to use more than one animate tag because each animate tag Only supports one property so let's say if you want to do a change of color you have to you have to add the second animate tag then begin with a Specific ID like rotate and you select begin Stupid Grammarly. Yeah begin rotate and things like that. So if you imagine you have a lot of different animations then your whole HTML document will be supposed to go along Okay Thirdly animating with JavaScript So you use JavaScript for complex animations and you serve when you need to support all browsers And especially rotating SVGs, which is a pain in the ass. So anyway Libraries you can use a green sock G-Sat or snap as usually they are more than that But these are the two that are widely recommended I'm going to use G-Sat because the animation method is a lot easier than snap as VG So adding G-Sat the syntax for G-Sat is to him next dot the method Then your elements the duration and the destination properties So let's just say for example here is that we are going to animate the rectangle such that the X goes from 50 to 100 It's just like this. So you just say attribute to this attribute over here is how G-Sat does SVG Otherwise, you can just say X and you will do a transform translate at translate X On rotation if you just say rotation 360 it's going to go slightly different from everyone else It rotates along its own origin, which is kind of funny But the good thing is that you can add transform origin 50-50% and it will rotate around the center Now, let's say if you need to for some reason rotate around some point in the SVG element You can set the SVG origin right now. We're setting it to the bottom right and it goes to the bottom right So this is something that other other Methods can't do so rotation with JavaScript is the best has the best support so far More complex animations basically what we're doing is this the basketball bouncing thing and in tribute to Huijing over here, so The things you see is that there are three things happening over here Translating X moving left to right you're bouncing up and down and then you have the basketball rotating so the SVG is Basically, you have a lot of paths. I'm not going to go in the cold pan because you're going to take too long So what you're going to do is that the paths over here the three paths over there are the other paths Like you see over here, which is very long Then you have to set different classes so that each each class can rotate one aspect of the ball So then we are going to do animations with like ball X ball Y and ball rotate each one will do one of its job and It's not too difficult to do the animation thing You just have to say like transform or rotate for XN rotation The hard part comes when you have to like bounce the whole thing because in CSS There's no easy called bounce. You have to set the keyframes with the timing functions and then calculate the The height that is supposed to be at which is kind of interesting and hard then you'll get something like this Yeah So anyway in SMIL you have to use basically the same thing because you can't do it simply But instead of classes, you're going to use IDs so you can use the animate tag to target each of these IDs So ball X transform zero to six hundred Rotation will be like around the origin point of 50-50 others. You have some problems then the animate tag which It's kind of difficult Basically, what it's saying is that the values will be 0, 300, 150, 300 They're kind of bouncing values and you have to set the key times at where these values occur It's kind of like the CSS thing. Then you have to set the key splines, which is the animation timing function This is like easy. It's our easy. It's our easy. It's our easy That kind of thing. So Using this is like horror story. So if you have to do something like this, please don't use SMIL Can we do that later after the whole thing stops? SQNA later. So basically it's going to be the same thing. Okay But if you're going to use javascript, we can use it simply especially with GSat just one class of saying ball would do Then you can say X Transform X to 600 pixels rotate 720 degrees at around its own origin and with a easing that you can straightaway use Then The Y value will be easing bounce And that's you get this immediately Without without so much code. So this is like the simplest one. The only problem is that you have to use javascript, but yeah Oh, we managed to get to here. So like cool river effects are line drawing and shape morphing I don't know how much time we have left, but line drawing is something like this If you remember the ps4 polygon animation, that's one of the coolest things about lines drawings and you can do it with It's hard to do it with CSS. So you have to do it with javascript anyway But i'm going to demonstrate how this line drawing thing works Then tell you what javascript libraries you can use to make it easier for you Basically, you need a path with a line Like this with the d attribute, which is the path thing and this thing has to have a width A stroke and that's that's the basic minimum part Okay, so you have to set the dash array Then after that you have to translate the dash offset So it moves like this Then you have to make the stroke longer which kind of makes it the other way So you have to do it the other way around and mix it which makes it the correct way And so summary You have to set the dash array and dash offset to the length of the path Which is kind of hard to do in CSS because you have to like Try an error kind of things like that So you can use things like vavascript which allows you to do multiple paths at the same time Or you can use gset or segment which is basically a free plugin Free thing that works the same way as draw svg and you can animate the path from anywhere like even in the center to the edges Okay, cool. Then shape morphing basically is going like And you need the two things you need over here is that the the number of points in the starting path and ending path must be the same So what do I mean by Points so if you take a look at this m over here and there's this s over here These are points on the path When you do shape morphing you have to make sure the two points are the same Okay, no more time So two ways to do this you can use the gset svg morphing Morphing svg plugin which is paid or you can use snap gset basically Uh gset native doesn't allow you to do that simply So you can do it with like saying a start path and an end path in gset Then more of it to the end path then more of it back to the start path when it's done This is how it looks like sorry got no time to go into the code The cool thing about gset is that you can morph any any number of points You can go from a circle to rhinoceros back to a star and go into some elephant shape And these points are complex. It's not doable in any other way other than this morphing svg plugin Which is if you want to buy it as totally awesome But if you are cheap and like me don't want to pay money, then you have to use svg snap svg which uh say Well, what is that the same path then you set the starting ending path Then if you have animate first with this mina is in which is like the snap svg is in thingy Okay, so this is like the start and then you have to after the start you have to go back to the original path with some Elastic easing in which allows you to to get the toy on your effect And yeah shape morphing summary pass once I have the same number of points on this you use morphing svg and that's the end Yay Uh-huh But when you're using svg and smell you're actually using Uh Well, I don't think there are any tools to make it easier to generate paths What you're saying is that creating the shapes right generating the paths? Well Yeah, you probably don't want to write the path yourself like in there So basically you use things like sketch or illustrator some vector thing to help you draw And you export it and then you have to like, uh, clean it up yourself after after exporting it Yeah For that right illustrator is much better than sketch when it comes to exporting cleaner svg So you might want to look at illustrator. Just the only problem is that I don't know how to use it I Sorry, haven't used inkscape. Sorry. I can't comment on that. Okay. Awesome. Anyone else Sorry Not that I know of What do you mean by traditionally it's not very it's all very bad Yeah Usually there isn't any Problems with animating is it's kind of like animating dom elements The danger here is that if you add too many animations, then it's going to start lagging a few Then if you are if you are starting to animate it, um, well, it's this is one Or how I put it this is one debate that's going on like forever between css and javascript animations They always say css is better than someone says javascript is better. Sorry, so There's this ongoing debate that you can have a look. I think uh, it's on it's on css tricks Where the author of gsat wrote an article about comparing the performance metrics on animating with css and animating with gsat Might be worth a look, but generally speaking, I think both are fine as long as you don't animate the properties that forces repaint Like so try to use like transform opacity and things like that and not width and height for example She'll be fine. Basically what like with animation you'll get things if you try to use jQuery to animate It's generally bad If you can't use any library to do anything then don't So you stick with the things that are already reasonably quick After that you get into the basic principles for design if you're trying to write something for a PlayStation 4 you need to know what the limitations are of the hardware and the software So even though you start yourself off at that reasonably fast point, so you don't know jQuery From there it's just down to The hardware limitations are but as long as you just give yourself that head start by Using the proper things s3g animation for example, um, then you know, it's not that bad You can still ruin it if you try but Yep I'm inspired Well after that's the time like twice this week Or you can use webgl Yeah, but again, you still you make sure you've got that reasonable face before you go crazy. Yeah If you want to challenge you can debug my cz as confidential It seems to me some memories swap between Like normal memory and GPU memory or something that sometimes That's another question I just have to comment like from my experience as long as you are animating Less than a thousand dumb animals That is fun. So, uh, if you're using above a thousand or ten thousands or hundreds of thousands then You know s2g may not be the best choice. So, uh, for example, it's the d3js which of course animates svg That might boost up as a sample which actually has a Canvas wrapper around it. So if you are animating like a thousand objects that you may want to use Canvas wrapper instead of animating svp because that would create a lot with flows and your browser may actually just hang That's the pro just listen to him I also have something to do with how large the elements are because I know that the browsers render in like squares that are about Like one sixth at your desktop And they have these retain squares