 at a premium. Okay hello everybody so can I get an indication of firstly who was here last time when Chris gave his his spiel about stroke dash array who was here last time nobody one month ago is it a completely new crowd isn't that fantastic I don't know what that means well I was here last time oh that's good then so none of you actually heard his thing except just one or two it was fantastic it got me back again that's for sure and I'll be talking tonight about SVG animations so can I just have a show of hands who has done much with SVG okay that's just to give me an idea of whether I'm talking blah blah blah over not yeah okay great and who has done anything with stroke dash array in CSS one or two I know he has that was his talk and anyone done anything with stroke dash offset okay great so everybody's gonna hear something new alright so I started with an animation of course but it's just an animated gif it doesn't really count I just wanted an animation there and I can't put anything else using Google slides so here we go alright so my problem was slow SVG animation so I use SVG a lot on my site and I do lots of animations and what was there was pathetic I was using many line segments and I'll talk about what that that means in a minute and then I'll basically I'll just go through the history of what I discovered and and so on I don't claim to be an expert by any means in all of this stuff but I just help you help you to see what I discovered and hopefully it's useful to you I'll talk about Chrome audits a bit I'll talk about stroke dash array stroke dash offset what I call pure CSS sticking to a small animation area and invoking hardware acceleration if you can now for all that is a little bit of it hopefully it'll make some sort of sense by the end of tonight okay so my animations are actually I I'm mathematics educator from way back and I do a lot of stuff with animating various mathematical concepts and so on and I use I used to use this library called JSX graph which will actually output SVG math graphs one of the things with with SVG is that you just get if your thing is 500 pixel wide and 400 pixel high for example then the top left corner is 0 0 and the bottom right corner is 500 400 whatever I said and but that's not the way mathematics works of course we're used to a x y axis and 0 0 is in the middle and x's go that way and y's go positively that way but of course in SVG it's y's go positive that way it's all over the place so this library came along and I thought oh great that that saves me a lot of messing around hand coding some of this stuff so I started to use it anyone heard of this I don't expect you would but one has why we're good don't use it it's terrible and I explain why okay so let's go and have a look at some of these animations and see what the what the issue is now this is this is the kind of thing some of you this might be the first time you've ever seen something like this but did you ever know that a sine curve is created like this whoa now it's deathly slow I created this now I thought I yeah okay that the circle goes round and the and the radius thing goes around and I'm creating my circle and it's all wonderful but the thing that you need to have a look at and all of these things is the frame rate that I'm getting which is pathetic it's it's under 20 frames per second and it's just pretty awful with this you can do things like explain what an amplitude is like this so that's what it does but it was so pathetically slow I thought I can't put that up I've got to do something with it so I I contacted the people who make this JSS graph and I said look this is really pathetically slow what can I actually do to make it better and so one of their suggestions was to use a data array and what's going on with that is in the first one that I showed you to I'll go back to that first one that I showed you actually is creating the curve by doing a very small line segment so it's going small and small and small and small and small and creating it as it goes around if you actually look at this closely it actually gets even slower towards the end of its travel because by the end of its travel it's got a lot of work to do it needs to create the whole curve up until that point and then it has to draw draw the thing on the on the screen it has to rotate things around and whatever so it's got so much to do it sorry yes yes this is as I said this is my story of discovery I it worked and I thought okay great look at that it works but it was so slow it was just it was just awful so instead of creating because what it's doing is just creating up to that part in the sine curve at every frame so it needs to it needs to calculate and then decide how much to do and do all the little segments to do around and put them all on the screen and then do all that in a 60th of a second and go to the next one and do it all again and of course by the end of the travel each time it's really got an awful lot to do anyway these guys said why don't you create the curve once and that is create the whole curve as a series of data points and then just take like take one extra item of the array as you go around it's still taking one extra item but it's not having to do all the calculation each time so as you'll notice that and plus a bunch of other things one other thing my first one uses jQuery they said look stop using jQuery and I did and I've actually never used jQuery since and if you're still using it if you really want to make life a lot quicker for yourself I suggest you actually get rid of it a lot of these libraries do a whole lot of stuff for you that you don't necessarily want or need and certainly things speed it up when I got rid of jQuery but anyway so with the data thing do you know what I mean by the data thing does that make sense instead of it creating the whole curve every time it's just creating the curve once as a data set and then just grabbing from that that array for each of the points so whoa is that beautiful or what so I was very excited at that point I thought oh good this is this is actually quite acceptable as you can see I'm getting 60 frames a second this isn't this isn't the most accurate of frame rate things but it's clearly giving me very close to 60 60 frames and I thought yeah this is actually I can I can live with this this is actually pretty good and trying to be a good developer we all know that we need to test on a million different things so I thought alright let's just go and see what that actually looks like on on an iPad on an iPad my friend system here does not behave nicely with all this no no iPad I'll never mind anyway you get it looks like that first one basically even though on a desktop it's looking fine but on my iPad it's giving me it's giving me I mean it it's it's like watching grass grow I mean it's just pathetic so it's giving me at the moment it's giving me 0.2 frames per second now it's giving me one 2.6 how exciting it's up to 5.6 it's up to 10 so it's just it's incredibly slow and so okay I got depressed again I thought I thought I had it licked but it was still quite bad so alright we'll go back to this so many devices alright I thought well there must be a better way to do this so before I before I show you the next bit what one of the things that I did get into then was having a look at some of Chrome development tools and seeing what it can actually tell me about what's going on with this particular library so let me just pull it up and there's actually so much stuff in here you can actually spend half a lifetime just figuring out what's here and figuring out how to interpret what's here and how to make the most of it but I found this fantastic I thought this is actually all really good so I'm going to start this thing off and I'm going to click the record button and just let it record a bit for a few seconds and then stop the recording and stop that I'm very conscious to turn everything off because everything I'm doing here cues up a lot of memory and I'm just a bit worried now what you're looking at is disgusting this is exactly what you don't want to see so what it's actually done is it's done a profile of that six or seven seconds or so that I just recorded and all of this stuff that's in here which I'm going to zoom in on now and go down here and show you some stuff there you go now all of these colors and all these wonderful things that are actually going on are processors that are going on in every frame so all of these things are things like timer feed function call draw move to update and so on when I actually look really closely at each frame it was just so ridiculously busy function call draw move to update remove to this one says remove remove to insert later I thought my god I mean that's fine if it's just one user interaction and you've got a couple of seconds and it doesn't really matter much but if you're trying to keep things going at 60 frames per second you cannot pull a thing out of the out of the DOM and just have it sit there and taking up memory and so on the other thing I want to point out here is is these these lines underneath here are indicating the the the JavaScript memory I'm in the memory use and and also you can see down here the the GPU use and so on so in all of this it's just in every second of this it's just churning up so many cycles in of everything and then it does a garbage dump chucks it all out and then it builds all up again and chucks again it's so busy there's just so much going on here it's ridiculous and I thought you know I really don't like this framework anymore there's so many things I mean I thought I'll try and beat this and try and sort of simplify things and cut out some of us the steps and try and work around it and I thought meh forget that I I just don't think I can do it so another library chuck it out and what I did was I discovered a much simpler library that was a bit old and I updated it and I now use it exclusively because it's nice and simple and I'll show you in a minute okay so I just want to go back to that using many line segments that I was talking about before and show you a couple of the other things that you can do in that in that the grown Chrome development tools and so on so I'll just show it to you simply here first so spread right out this is what I was talking about before each frame is drawing another segment and what I was drawing was the 60th as much of course so it just go chun chun chun chun and would look nice and smooth as it went around so what I'm going to show here is some of the cool things that you can do in here and I'll go to rendering now paint flashing is fantastic I like this so one of the things that I learned was if your whole picture needs to be redrawn at every step then that waste a lot of cycle time in your animation so what's really nice about this is that the only part that's being redrawn is the part that's flashing in green so this is actually a really good thing here I'm using my own library it's nice and simple I don't have all that other junk stuff that's going on and it's it's nice and simple unfortunately my final my final version that I'm going to show you later still has the whole thing paint flashing what you find when what I found doing this was that I'd fix one thing go and build some other things in there and then I'd find it sort of messed up something else that I'd I've tried to optimize before so there's still things that you can do but you also need to sleep occasionally too so there you go the other thing that you've got is a frame per second meter and what you'll notice with this is it's giving me mostly close to 60 frames a second but it's dropping down every every second there it's having to do something and it's quite busy where it's doing it so it's dropping right down and it's not actually that smooth when you have a look at it and if I was to speed that up 60 times then you're going to see quite a lot of drops there as well as you'll see in a minute one good bit of advice that I I read recently is create things super super slow and make sure they're really really smooth then speed them up a bit and speed them up a bit more I didn't do that when I first started developing I just threw it all in and hoped for the best and it wasn't the best way to go at all ok so perhaps what I'll do while I'm here I'll just I'll do one of these recordings again for you and show you the difference now what you'll notice is that the animation is doing strange things it's going faster and it's also not as smooth as it was before I'll just stop there one thing that I did learn about Google's developer tools these these various rendering things and so on is that of course they take up a whole lot of memory they they churn up a heap of cycles and so don't get depressed if you go and measure something and then it seems like your frame rates drop right down a big part of it's just because the recording process and the various things that it's got to do slow things down a lot so if you haven't seen these things before I think this is great it actually gives you a screenshot of each step you'll notice that this is all a hell of a lot more simple each step has got very very little going on why because I made it so and so in one second you've only got all I'm doing is I'm firing the timer I'm doing a function call I'm doing my animation function I draw the path I set an attribute and then here's where it's actually painting the thing and then it can just sleep for the rest of the second it's got nothing else to do so it's not doing all this junk stuff in the in the background so yeah when I saw this I thought so much cleaner and so much nicer to actually do all right so so it's a bit of a summary there I found that calculation of course is pretty quick in JavaScript especially Chrome the other thing is you shouldn't develop on Chrome you should develop on IE or something else crappy like that and then if you get it reasonably good in IE then it's going to be fantastic in Chrome I make the mistake of doing things in Chrome because I don't really like to use anything else much but yeah anyway so the drawing part is slow so if you can reduce the amount of drawing that's involved then that can actually be good but of course if you try and calculate and draw then it's deathly slow and that was my big problem when I first started so what I tried to do is try to do it so that I'm not calculating and drawing at the same time trying to reduce that as much as possible so I've shown you some of the Chrome order stuff I've said use simple libraries or none at all and now we'll talk about the stroke dash array and the stroke dash offset stuff so I'll go to my W3 schools which I don't use very much but for this this is what I wanted to do okay so what's going on here is I've got a this is an SVG it's it's 500 pixels wide I've drawn two lines here one is gray to sort of a comparison line if you like and the green one is the one that I'm going to do most things with and we'll go through what this stroke dash array actually is you've probably actually played with it but forgot what it was called or something or other so what stroke dash array does is gives you this kind of thing so if I go 50 and say 100 what that's going to do is it's going to draw for 50 pixels have a rest for 100 draw for another 50 have a rest for another 100 so here it is drawing for 50 rest for 100 draw for 50 rest for 100 and so on you can have as many numbers in there as you like so if I do something like 10 and 20 and 40 or something or other then we get Morse code I actually tried to do Morse code SMS for tonight but it just got too fiddly so I gave up sorry it was about that many numbers no this is ridiculous so I gave up okay so what I'm going to what I want to point out is that if I the first one I showed you was 50 50 which was 50 on 50 off 50 on 50 off but actually I don't need to do that if I just do 50 it has the same effect so 50 means 50 on 50 off 50 on 50 off like that and so on okay who can tell me what what will it be if I do 500 remembering the whole thing is 500 wide what will it look like if I say 500 sorry bad shot yes okay would you like to come and be a chocolate strong okay you are correct it will just be a whole a whole straight line what if I put zero got caught me pants sorry some people said zero you say straight line wait be brave come on whoever can give me a reason sorry when you when you have zero it just means it's in CSS zero just means turn it off right so zero just means it's off simple as that actually I did that because I got caught with that I thought I'm going to play with this no put zero in expecting to be the whole thing expecting to be nothing of course and it was the whole thing so there you go all right so what I'm going to do now is I'm going to go back to do 50 here yeah you're looking at zero and then everything else so your zero is rendering of zero but then the rest of the array is showing us that's actually interesting point yet probably is too because you can have multiple numbers in here yeah because your implication when you had say five is it your five five five five five basically so five hundred is five hundred five hundred and so on that zero zero and then everything else actually actually thank you for saying that yeah as I said I'm not the expert so for me out half this stuff myself in fact when I was showing you that multiple numbers one when I put in like 10 50 and 30 and whatever if you put in an odd number it will always double it so it ends up being an even number and then it will draw that so what Chris said just going on from that my zero actually is zero zero so it's it's anyway like that go figure all right so what am I doing here and what happened there I don't what's that okay so I'm going to have the top one and the bottom one are identical at the moment now I'm going to talk about what stroke-offset actually did the reason I'm doing this tonight is that actually when I first started to read about this stuff I couldn't find a good explanation of it there were quite a lot of examples but I didn't really follow what the what was really going on in the in their exit in like what they're explaining so I thought I'd have a go myself so stroke-offset now if I do a stroke-offset of say 10 of 10 what's going to happen is this a stroke-offset just moves everything like that so what's happened is this one here is just starting 10 pixels before this space is happening 10 pixels before this is happening 10 before and so on so if I was to do another number like halfway it's just going to it's going to bring this one to halfway in the gap along the thing so this stroke-assure is actually really quite a useful thing for that exercise that I was doing before because it works like this if I now make my my green one 500 500 by the way you can have commas in here or not doesn't matter something that caught me out because actually I made a mistake didn't put a comma in at work and I thought oh so you don't actually need a comment for that and I'll do this the same so 500 500 should be what you'd 500 500 be just a straight line because it's 500 on and that's what we're going to see and then 500 off so here it is and now if I make my stroke-offset 500 it's chocolate time I've made my stroke-offset 500 what should happen now sorry the same it's actually no line not giving her a chocolate she's she's running the show right a stroke-offset of 500 means that what's happening now is that my my 500 500 is actually 500 on 500 off so if I do a stroke-offset of 500 it's going to move the whole thing this way and so what I'm going to get what I'm going to see is the zero the zero part so there it is it's disappeared who did say that you'd like to claim here you go okay send everybody away happy do we have enough for one for everybody almost quick wave your hands everybody as he said you only all you have to do is participate you don't have to you don't have to be correct okay so now to show you the magic of this thing I think this is really great if I now change my stroke-offset from 500 to 490 I'm just moving it a little bit this way so I'll just see a little bit and if I make it a little bit less say 450 I'll see even even more of it and so I get smaller and smaller number here I'm going to see more and more of the thing until I get all the way down to zero and what will I see and you don't go out the back there was dying to answer all night so there he is there you go okay so yes you are right you see the whole thing so I make use of that process for drawing my my curve that I want to draw I create the curve once and then do the stroke-offset so that I don't see any of it and then as the animation proceeds the stroke-offset number goes from the length of the curve down to zero and so the whole thing will end up here as we as we go along so here was the final result on the on the live page and there it is looking beautiful the radius is doing its thing the circle is doing its thing it's giving me a nice 60 frames per second and it looks good on iPad however when I did it on iPad I got depressed because it didn't give me 60 frames per second I thought I got after all that I still don't have 60 frames per second do you know why sorry well actually I was going to say Chrome on on iPad is faster for all of these things but even Chrome was still giving 30 it was still it's not giving 60 the reason is that iPad actually throttles it back to 30 anyway to save battery thanks Steve Jobs right so the best I could get was still about 31 or something rather than that's all it would it would actually produce but still it's a whole lot more respectable than the two or three frames per second that I was getting before and it's you can see it and it's and it's viewable or whatever so just kill that there's maybe I'll just show you this quickly because I'm almost finished you've probably seen this kind of thing where this is where I got the idea to actually do this and the animation will start sometime soon that's not it this one here have you seen this sort of stuff so this is what they're doing same sort of thing draw the whole thing hide it all and then progressively show it now this actually also show you something that I like for my stuff what I wanted to do was to do it all in CSS like the circle that was going around and I wanted to do that because I knew I could do it completely CSS and also the radius thing going around whatever the trouble is I couldn't control it it just had a mind of its own of course and and this is sort of what they're facing here is that unless you set it up properly it will you know keep on going forever or whatever and of course I could get it to work but to get it to work at the same time as my other curve and have it working exactly I just never got that to work so I thought all right give up still do it with JavaScript but it's still working right okay so my summary of what was going on I create and draw the complete curve once and then hide the curve using stroke dash array what you should all be thinking is how does he know how long the curve has to be if you can answer that I'll give you two chocolates sorry that's why I'm giving you two chocolates I'll tell you in a minute sorry actually it's it's a no it's not it's not because it's not the same as the length around the circle good guess I'll tell you a minute so progressively reveal the curve using stroke dash offset you need to know the length of the curve at time t and this looks scary but it's really no big deal it's just square root of 1 plus the cosine all that is is just this here is just the derivative of your expression so I'm doing sine the derivative that is cos square it so to get the length that's the only calculation I'm doing to get that length for each one because it needs to know how far along the curve it actually is that was the bit that I couldn't coordinate with CSS it didn't want to know about that I just couldn't marry the two of them together so it didn't work oh yeah all right so this is a bit of nonsense I just did for tonight I'm not even sure that I like it this this thing here it's just a bit of nonsense and I thought okay fine so I thought what I do is I'd show you this is just another concept that is quite nice to have if I go back to my rendering thing and do the paint flashing and do a refresh so what's nice is the paint flashing is very small so how that thing works is a series of divs it's about seven or eight divs or something or other and they just move in using a Bezier curve function in CSS this is all CSS this time no JavaScript involved here no library no nothing just straight CSS but it's actually kind of neat that it it only needs to paint the actual div that's doing anything at that time so very very small just why it's quick and if I do one of these recording things I don't want to do the page though I just do it like this I didn't do that right okay like that and of course there's nothing to see here because there's no JavaScript actually going on at all it's just all that's doing is painting stuff so all this is is actually JavaScript that's going on when I did the page load but all of this stuff is just moving the moving the divs around you'll notice I did it twice and then I stopped it there's nothing worth there's nothing more hypnotic than animations this just go on forever please don't do that there's a TV show I watch and she thinks the woman that runs the thing thinks it's wonderful to have these animations just going on endlessly and I did by the end of it I just I can't watch her I can't listen to what's going on it's just it's just grateful okay so yeah use as small an animation as possible I just go back to this last one that I did I might show it to you but the paint area is actually the whole thing before I was happy that I could get it to paint just the part of the curve that I was showing but sadly it's gone back to painting the whole thing and I thought I really have to start again as I said I like to sleep as well so it's fast enough I gave up now I haven't said anything much about hardware acceleration I haven't had a lot of success with this if you have then please share I'd really like to hear but what this actually means is if you can if you can take your object and move it into a higher plane if you like into its own layer and then animate it there then the browser doesn't have to redraw everything else that's underneath it a bit like what I just showed you the only thing it has to redraw is the stuff that's moving but if you've got an SVG you you want if you can you can move the thing into a higher layer so you do that using Z index well I you know I was promised that this was going to work and I fiddled with it quite a bit but I couldn't get it to make much difference in in what was going on it's still the browser see different browsers seem to want to still paint the whole thing on every animation and I thought has anyone played with this you might have more luck with the new CSS forms and translate it yeah that's what I'm talking about that that's what it is I was doing transforms on that as experiments and it just didn't seem to know that won't invoke hardware acceleration that would just try the hardware acceleration just pre-emptive yeah basically because without the soon as something's called then the browser will decide whether wants to accelerate or not when you basically say I really want to accelerate this bit not yet but just get ready for it I think what you just said then reminds me of the problem it was sort of getting the browser ready for it but it never actually did it when I wanted it to do it that was sort of my experience so I anyway I just thought I'd mention it because all the writers mention it and if you can get it to work with please let me know so how to get it to work is to do like the translate Z so it moves it into another another layer I said has some drawbacks the drawback is you spend hours trying to get it to do something and it doesn't do anything that's the drawback I found the other thing that I found very useful was to use request animation frame and not using set interval I didn't go into that before but with set interval it will actually fire it try if you if you ask it to fire at 1 60th of a second it will fire if it's not busy doing something else and if it's busy doing something else it will just stop firing right whereas request animation frame is basically every time the screen refreshes at 60 60 times a second it will try to it's still it's still going to lag for the same reason but it tends to be more reliable for smoother animations I found keep the paint area small as possible as I said use Chrome performance tools many hours I spent playing with those tools they're all great there's just so much information in there it's fantastic use simple JS libraries or none at all invoke hardware acceleration and if it works please let me know and use CSS as much as possible but as I said you can't always get it to play nicely with your JavaScript one thing I found is avoiding fade in fade out I found that that slowed down things terribly especially on a phone so I don't do that anymore yeah especially if it was happening during a page load or something rather the things would just slow way down so I do other things to have things sort of subtly appear rather than a fade in fade out sorry yeah as soon as you're out the channel or something that's already running a long traffic yes yeah and in general animate your transforms not like try and change your widths or your heights or those sorts of things transforms as usually the way to go in terms of animations and try to get 60 frames per second and if you can you'll have a warm in a glow and think life is wonderful thank you for listening any questions does anyone not got a chocolate he's he's asking a question let me deliver them so I don't destroy people's eyes in the meat let me go back to something like this now what was going on here was both of them have got 500 500 and 500 500 for the stroke that you're right so it means 500 on and 500 off right and by by telling it stroke dash offset 500 you're actually moving the off portion to here right then that the stroke dash offset says well offset it by 480 instead of offsetting it by 500 offset it by 480 so you're gonna have that much so actually the off goes from there to just there if I made it 450 the off would be from there to there so the on portion currently is there you see why I struggled with this first time I didn't get it at all first time I came across it either what you're seeing there is that big yeah so why is it that we don't see the tail end of the graph here because I'm just starting it at zero I see what you're talking about yeah but with my with my various animations I'm just starting at zero so the curve that I draw starts from zero and goes to 2 pi right and then I offset it so that it's actually just off screen there let me let me do a start right there so what's currently happening there's the length of a curve and I have moved it back to there and as it goes on it starts it's like a piece of rope that you're pulling through and it will appear yeah I had to do the same quite a few times let me guess which browser that is starts with iron ends in me no hardware acceleration there anyway do we have time to look at it do you want to come out come out Charleston please it's a conference website any particular well okay so if you haven't seen there is a big JavaScript conference coming around again oh and if I type it within I it might even work that one and that's a really interesting for the animation I actually put a matrix 3d transform in here too so you can play around with it so you can like for example make this one 97 or control windows and then you can use your arrow keys up and down to change the value as well which works with mediocre results these things never work in demos or here let me refresh it to zero so let me do this one so you can just tap into one and use the arrow keys to change it slightly if you like so this is if you want to play around with matrix 3d you can do that but my big problem with this is well this is all great and all the webkit browsers is there five of them here yeah just go down the bottom see it too there's a way along me I'll close this in the background because sometimes it has a few points maybe it works on Windows that when you try this on Mac give it time it's a week of this so tell us about your conference oh yeah yeah I think by now actually I think it has always been the biggest web developer conference that we have in Southeast Asia it's a three-day conference happening in January it's all about the web platform and this year will include also some CSS content because we're gonna do this properly and you just copy paste have you heard about this new trend called CSS in JS we do that on the conference level so this is just for the trolls and here you see my problem there is an essential part missing and sometimes it flickers when the GPU then decides to do so and I'm yet for the life of me trying to figure out why that is I assume it has something to do with nested 3d contexts that seemingly webkit is more comfortable with than this thing it's also really like the performance really shit and it's the same on Mac as well on Firefox I have not no I just try to play around you should check the box on there you can see it in writing a the zealot dove to the conference and get us fix it yes there will be plenty of this I made sure latest then we're gonna fix it and here's by the way this is that I was talking about earlier that attempts the scroll thing and it works more likely than right and I have to redo it eventually and the way I'm gonna do is I gonna just make a big container in the background that makes the normal website scroll normally and then depending on your scroll position I gonna move layers on top of your scrolling so that like you're still doing native scrolling and they're just layers on top that will lock in instead of trying to lock the scrolling I'm just locking layers according to your school that's works much more reliable and that's what I can recommend snap points is still shit really doesn't work I get so many complaints about this if you like this is a web conference like this full of writing sucks yeah so if you can solve that for him tonight three chocolate I'm happy to give a free ticket out for this you solve this on firefox you got a ticket by the way on tickets they are before the end of the month still 490 and they're gonna go up to 590 from 1st of September the good thing is there's gonna be a 20% discount from first of this September if you remember talk CSS no sorry single Singapore CSS at the discount code right this is for community you're in the know it's 20% off so enjoy thank you good challenge should I talk about mine or should we just you got time? how long are you gonna wait