 Good evening all my fans thank you right so I'm Aisha I am a front-end engineer at Vicky so today I'll be talking about something that it's quite unfamiliar to me as well it's I'll be breaking down SVG animations with you but this is not really about SVG this is more about animation and I don't really care about the technical stuff I just want to get into the fun stuff of animation actually so without further ado when I first started working with animations actually it was it was a slightly scary thing and it's because of three reasons because I don't really have the fundamental when it comes to SVG animations or any types of animations actually the only fundamentals that I have that I could actually use for this personal project of mine was a user interface animation which is not really that different when you translate it into something much more complex which we will talk about later and the second is it's very difficult for me to visualize animation see I don't really have the best imagination I don't have art background I don't really draw and the only reason I can draw is because of illustrator I can cheat a lot with illustrator actually because I can correct the lines I can correct colors very easily but don't tell me to draw on canvas I cannot do that and thirdly it's it's unfamiliar territory and I've never I don't really work with SVG on my on a daily basis so it's mostly just JavaScript CSS when SVG is when I first read about it it's a different different warp it's not that difficult but there's some concept that you need to be able to grasp before you would be able to use it effectively and so this is a story of zero to hero okay where I start with no animation experience at all into making something that I'm quite proud of so this is something that I created recently it is actually a visualization itinerary of my recent trip to New Zealand and as you can see it's actually a itinerary of it's basically a travel blog on steroids where I basically tell you where I went and basically represent the area that I went with icons and I put a little bit of blurbs of my experience there it's actually incomplete it's incomplete because Quijing right there actually forced me to speak about it today so I had to actually just deploy whatever I have because I had plans to actually put pictures of pictures of me and like in order to represent the place even better yes that's what we've been taught me today and so I'm going to be walking all of you to the process that I had to go through in order to work on this like I said zero to hero anybody can do this if I can do this y'all can do it too so first things first so if any of you are interested in looking at the code or more of the animations provided here you can go to this site I put all of the animations there so you can check out the code easily I will not be presenting code today you know it's not my specialty so okay so the first thing when you when you start with something that is really new right one of the things that scares you the most is you know you don't you don't really know where to start so the only advice that I have for you is look at the fundamentals of animation and like I mentioned before my specialty was you know I'm a UI engineer basically so I've animate UI stuff and as you can see there's some basic animation properties that you can look into like rotate scale opacity and translate and this is something that usually CSS engineers will be familiar with right on a daily basis you work with this so animation for UI is actually pretty simple and it's something that we're familiar with so for example oh the image is not loading okay so you'll have something like this which you you only need to animate one property which is the scale property in order to make sure that you know it it works nicely it animates nicely and also for certain animations there will be cases where you need to combine animations right in this case you need to combine animations where that is not just scale you'll combine say for example with and a bit a little bit of translate when you're over so this is UI animation basically and it's what I deal with on a daily basis what about cartoons and characters though is it the same well yeah you can say so for example if you have something like this which is just a simple animation of a sheep rotating its head side to side it's very simple you can think of it as just rotate left and right right so it's just one animation property and there's also other complex animation which you can combine those animation properties just like the UI animation method that I talked about we before you can actually combine them to create interesting effects like for example smoke effects like this I don't know if you can see it but there's supposed to be a smoke like a chimney smoke there and this is a who's a lot of the ring fans here any Lord of the Rings fans okay right okay this is the shire okay in New Zealand you get to see this sorry okay so well you can see actually in New Zealand you can see this in Mata Mata place in New Zealand so anyway so how did I understand how to manage how to actually how do I understand the connection from the you from UI animation into something as complex as this right well this is where the oldest trick in learning comes into use which is we learn by doing and then we watch and learn and then we observe and so my inspiration comes from a block by David Walsh David Walsh actually I don't know whether it's David Walsh but it is in his block so so I saw this some oh that's interesting the animation didn't work properly here okay but this is not mine by the way so you have that so I got the and it was supposed to look like an explosion and it is a combination of opacity and scale and when I look at the cause oh it's interesting this is actually something that I'm quite familiar with you know some some smoky things I could do that so I decided to just adapt this and I did a little bit something different to make it look like a chimney smoke I'll combine just like David Walsh it was kale and a pasty but I combined a little another animation property which is translate that could actually make sure that the smoke gives like it's going up kind of effect yeah so that's basically how I achieve that smoky look all right now however I mean we don't live in a utopia not everything is easy for us to animate unfortunately right so like I said like my second problem was I don't really know how to visualize like I don't really have the best imagination in the world you know if I do I'll probably be a game designer by now reading would know all right so but how do you actually visualize right when it comes to animating something much more complex I'm not talking about smokes but I'm talking about animating limbs for example and I'm talking about animals you know animating animals walking or animals eating how do we do that so this is where prototyping animation could come in handy but how do we put it on you should you know how to protect your did like prototype your design by basically using sketch or Photoshop but is there a good way to put it up animation well it's a bit of a hack so this is an example that I have when I try to visualize the animation that I want to do what I want to do here is I want to animate the sheep eating a grass so what I do is basically I just select the head right select the head and I want to imagine that okay I want I want this sheep to be eating something so what I do is I move it down a little bit and then I rotate so when I rotate I notice that oh that looks like the sheep is not nodding not really eating something so let's just you know rotate it a little bit more down so that it actually looks real like it's eating and then we just translate it again further down to make it look believable so why is this important right it's important because so that when you first look at your animation the way you approach it you don't really approach it in terms of thinking about the code right you think about it in terms of visualizing it first you want to visualize how am I going to do this so once you have a clear visual visualization you can actually translate that visualization into code in this case it's very easy for me now I know what I'm going I want I know that I'm going to translate it down by a few pixels and then I rotate it a little bit by a few pixels and then I'll just repeat so basically in terms of animating lips it is best to separate the things that you want to animate in illustrator and this is what we've achieved see where the sheep is actually eating something and I put it on loop so I don't really have to bother sometimes people don't notice that I mean I animate things I just want it to be on loop and just like I mentioned before if you want to look at code it's actually a little code like here it's not it's not even that much see so it shouldn't be that intimidating so all right so thirdly it's unfamiliar territory but here's the best part about unfamiliar territory right you can go crazy and combine those fundamentals I remember talking to one of my mentors before about the beginners mindset especially people who are not familiar who are in unfamiliar territory the best thing about beginners mindset is that you don't really think about the impossibility you don't really think about oh this is hard because you don't really know what could go wrong you don't you don't really have knowledge about oh is this the right thing to do is this a right way to do it or you don't really have that mindset of huh this is this is not the right way to go as a beginner you every way is bad valid way basically and so I have a question today who can guess what animation property that I use okay you have translate rotate scale and opacity I'm not talking about the smoke I'm talking more about this guys are here whoever can answer will get chocolates anyone please take a stab translate okay how do I make it vibrate right that's correct get the man the chocolate sorry I'm not gonna do it I'm giving the talk all right so so that's correct it is it is translate so what I did was I just translate it up and down by two pixel two pixel negative two and then I just speed it up by point five saying you get that vibration animation is it the right way to do it I don't know maybe not but who cares okay so my conclusion is that animation is not that scary all right if I can do it anyone can do it and I hope that my talk today this not so technical talk of mine will give any one of you the courage and the motivation to try out things that you would not have tried out before all right whether it be it animation or not and so that's all I have for you thank you and if you have any questions feel free to ask don't be shy all right that's a good question so this morning so basically I actually load it with Ajax so basically I load all of those symbols with Ajax and then I prepend it on my HTML all right this is initially how I want to do it so it's it's faster and I can cache those files the problem with inline SVG is it's difficult to cache right but with Ajax you if you if you load your SVG with Ajax and it be pended then you can cache those files so that's what I plan to do that was initially my plan but this morning I had to deploy to code pen to do this demo and so I for this one yes you're right I inline it there's no preloading yeah it's just in line inlining SVG other than Ajax there's a way to preload I think there is I think there is but I'm not so sure yeah so we need to load too much so many images no it's actually it's not image SVG is actually paths yeah so it's not really loading those images but it's loading those path and it there are okay so there are ways to actually optimize your SVG so basically I didn't talk much about the technical part today but probably I should have but there are ways to optimize your SVG in terms of optimizing the path in order to make sure that your code is small right that's one way so of course with SVG you're gonna get one large file if you do not know how to optimize correctly but if you can I can I enter a site that I could show one of the sites that I go to to optimize my SVG is called SVG O yeah SVG O actually helps you to optimize your SVG file to make it as small as possible what it does is it's tripped out all of those unnecessary things on your on your SVG file basically for example ID I think they could actually shorten the ID names for example to make sure that the file size is small and one one way is that yeah you can see the features here which can choose how to you can either purify your code to make sure you minify it with a smaller file size yeah so this is SVG optimization in itself is a topic on its own yeah so if you're interested to know more about SVG optimization I suggest you check out articles from Sarah's we done she's I think of her as the SVG queen she's really good at these okay but in some browser the colors some some transparent colors and I'm not supported right right I mean that different yeah check your paths and also I noticed that when you have shadows it didn't work well if you have shadows gradients work well but not shadows yeah yeah yeah I guess catch is a really good tool as well yeah yeah if you use a phone in that in your SVG that is not a system phone you run the risk that it will not render correctly because then it depends on the phone being installed on your users computer so like what Chris said you would convert it to path but if you convert it to path your file size would become much bigger so you need to keep that into consideration another alternative is to serve your phone as a web phone and you confirm you'll be able to get it and you will get the savings from SVG as well so there's a bit more work in there but at the end so for example the funds loaded correctly but the size right whenever in the SVG the text is inside the rectangle means in the browser after rendering the text might be larger than the rectangle you might want to check your the SVG file itself because at the end of the day SVG you can debug your SVG in the browser especially if you use like Chrome Firefox is also pretty good now you use and they were actually pretty fight for you or even if it's compressed and then you can actually hover to see exactly what what goes what is happening and the properties that are applied to that particular element of the SVG that you are highlighting to see exactly what we're known because it doesn't really translate directly the if especially if it's font size inside the SVG and when it's rendered in the browser I don't think it's the same it shouldn't be the same but it I don't think it's like 16 points in your SVG may not be 16 points in the browser you will probably need to double check that there's always a bit tricky the rules SVG fonts in your SVG yeah lady behind the question right right right right right so one of the difference that I found is it is very it's easier for me to style and inline SVG but when I embed it in some other way it might be hard for me to control it even with CSS you see so this is why ultimately inlining is preferable but like you said yes inlining could be very messy but we have a method where we can actually use you have you heard using SVG as rights before no okay so basically okay so when you go to the right and another thing that I want to say is in terms of controlling the messiness is to actually reuse your icons right so basically these and these and these are actually icon views it's not like a new SVG file or anything it's actually reuse we use you can search for SVG symbol to to learn how to reuse your SVG and this is good this is also another optimization solution that you can look into actually by using symbols instead of actually putting paths one by one because that could get messy and it'll make your file size bigger so using symbols is one of the ways to make it less messy right thank you no problem I also want to shout out a book on SVG animations that's really good it's by Sarah Dresner just got released very very recently very comprehensive book if you're really interested in SVG animations and you really want to get into it it's very accessible meaning it doesn't assume that you know a lot of things already but at the end of the book you'll be pretty great with books kids don't ask hard ones sorry oh it's from this side I forgot I'll share it with you it's a it's a site with open source SVG maps of all of the world so yeah I can give it to you yeah you will be in a show notes after the fact when the videos are published and stuff follow us on social media yes yeah the only thing I did optimize was my SPG oh yeah yeah so for for for the New Zealand map I actually downloaded the lease file size all right that's the first thing I did and the second thing I did is when I was illustrating with sketch and no illustrator mainly because illustrated easier to actually optimize better optimization so I make sure that I follow a few articles that actually teach me how to optimize my SPG further so I actually optimize the symbols and all which you are they were the engine for it's right yeah that's true that's okay because everybody had a lot of questions right thank you somebody else needs to give me an SVG talk okay if you are my friend you will be eventually forced to talk he's a miracle that I see my friends but that's not the point the point is even one day you all will be sitting here and talking also because Chris and I are running out of things to talk about yes yeah they will come first time here so yeah but anyway we've got a lot of stickers if you are interested in stickers and you can come and like look at my mascot but you cannot have him because he's mine thank you so much thank you so much for being wonderful audience