 Hello Hello, Wave Can you see them? Can you see them? Okay, great. Yeah, go Oh, this is what me? Yes, it's you Where's Sarah? Where's the cat? It's on the couch Hi Sarah Don't think it graces like the couch Are you sharing your screen? Can you say my phone first? Nope Do you want me to pull it up and then you talk over it? Do you want me to pull it up and then you talk over it? Yeah, you put it up You on iPad? Yeah Because life was not hard enough Exactly Yeah, so we are using CSS Custom Properties and a red harbor Tell me what you want me to do Okay Okay, wait Yeah, start talking This is highly professional, isn't it? This is what we do all the time Anyway, start talking I think things are improved Minutely Can you be Isn't that I was looking into this This is how I'll talk about you before you get in the coat This is the preferred reduced motion media query And the idea behind it is you have animations which are great but some people actually have problems with looking at animated things because it can cause or particular problems Sarah can explain what problems can you get from too many animations What can it do? I can send particular people to have a bit of a meltdown which can be a problem for people on autistic spectrum in particular You also have people with epilepsy as well and I can set off and I think it's also not a good thing It can be quite overwhelming for those people with sensory disorders as well Thank you So that's why this exists This was introduced by Apple in Safari a while ago It's one of those classic things It's a great Apple app It's in one browser As of 11 hours ago it's just landed in Chrome and it's also in Firefox 63 in pretty much everything right now The question is why would you want to use it so we can never mind and basically what you need to do is what part of the code can you actually see at the moment The one that says root and I've showed the media query that says prefast reduced motion So the idea is that you actually if you scroll down to the transition code you'll see here that this is declared twice So there's the hard coded fold back I've done a release for your time in 500 milliseconds so it's really really obvious and then you get the animation timing under the myth which is a CSS variable and you think oh, CSS variables can't use those because the browsers don't support the moderated disk that's why we have the fold back up so the browsers that do support CSS variables and support media queries will do this properly the ones that don't support CSS variables will just show you all our measures so you add an extra line to your transition like so and you scroll back up to the root that's where the variables are actually declared so it's really simple, you set the timing as a variable the media query requires a reduced duration and you can do this once for each of your animation timings animation timings will typically be pretty consistent anyway so that means you write a fairly variable code and so that you support people who have reasons that do not have strong animations and again this is in code, Firefox and Safari as of today so that's really good I need to change this as an experiment recently I think I can turn into a media query point easily so I'm going to take a bit more and see what happens from it but once I've got it nicely done I'm going to put this into every different CSS every time I've got an animation because for the people who are affected by it it makes a big big difference in their lives done Yay, thanks passing it off to like Olivia, Olivia are you there can you see, can you see people a lot of people here hi, hi, hi, thanks your fan club man cause um I can't drop off like cause I I can't show up yes please OT, OT oh she's back whose screen is happening whose screen is this, excuse me my co-pan, your screen is inceptioning us CSS animation in general so machines can start transitioning I need to comment this out most of it sounds really good idea but actually it turns out that like 8 images don't take off which is quite a lot and after that everybody else so this animation property so that it works like you're obviously being served to break it down just to see how it's done in construction so the first one is that just moving the width of the before civil area width and the second line over here I just pretty much you can change the line on top you can change the property but because this thing is embedded into this little thing and I hope it works so you just move me the correct percentage of the correct time and then it's just a normal like a city that comes after this animation is done so yeah and I'll give you a few more examples of what I've done so far, this is another one this is your such a smooth look but it's pretty much just really transformed the take the lines accordingly and then put me this level and then I will come up with that again at the correct time and so pretty much it's actually like super simple it's just I take a lot of time to execute it but when you execute it it's just pretty good I don't know this is also the most mind blowing thing I did it's my favorite then but basically this is the one that's made for the fan but you can it's a special connection but if you open it, it might be pretty much that this this is like where and why properties are good technically and then put a bottom and then it just closes so these are the things that you can sort of do with CSS animations in general I'm going to touch a little bit about JavaScript animations because I actually don't use them myself in fact Google brings out documentation for the first time on this app I need to show how good it is I never really needed it because I can do everything with CSS animations also JavaScript kind of scares me so I try not to get into it too much but it it actually just animates CSS so we can put it all in code so that it's just much easier to create and CSS is not very mass CSS is just a lot of CSS and it can get quite overwhelming but if you look in some so it just is that can you see the code? actually it's very blur so you just talk through can layer how blur? then it's it's just that please check out please cannon it's one of the most opinion person that uses great software basically all these are SVG animation and library software allows you to release just SVG animation any SVG very simply and it's not a lot of code in general so let me check out please cannon that is all okay thanks thanks so much okay can you see my cannon cannon cannon at the shell it's called build.com and if you look at the size it's really snippet and made from a single bit it's like a bow it's made from like a bit and that's shallow to do something similar but I do like it's a lot of work so I'll do something different which is like a macro interaction so if you take a look it's just that I'm on the road and there's a movement on macro interaction and I'm mostly designer but I have to be fun and development you know macro interactions are really important for running in general so I made the quick smart snippet like animations can be very I just have like about 5 no no no elements and I'm the road and I left here and I left here next which is like a letter that comes on top a different letter and the previous one is the and the notification app and I left here a little bit but it's really just moving from border to first direct and changes to like CSS better better so let's just I think made it border this was made from borders and then border into a lot of things and create an input like this and then I'm just adding like transforms and dark shadows with like a small shadow like that and here looking at the letter this is actually made from one thing can you see that there's like a white part and a blue part on the bottom so this is made with a green sorry about that the lights here are made from dark shadows and the color is the two chocolate you can see you like these are just dark shadows so the two lines are this of the two dark shadows and it's changing the work so I'm just actually creating a group that looks like this line and putting dark shadows to it so that it looks like there's four lines but there's actually only one there or one of the other ones I guess it's not the one I would put a bit of an arc with yeah so this is how I made the lines each animation would be similar to the other ones but each animation is very very simple so if you look at the work we did on the significant it's really just a combination of scale and rotate and opacity which is just increased in the group from 0 to 31 which I expected to be and the letter which is just changing the job and the height very simple animation but by combining them and timing them correctly it looks pretty good so if you think like micro interactions like this it works very well never mind still got chance when you come back next month the month after also can the computer around so you can see the live people yeah mute okay okay so today I'll be sharing about actually a subset of the previous talk because there was some drawing of CSS but specifically I'll be talking about using CSS background gradients to draw so why why not because we can and this was actually inspired by something called by something called a CSS battle so basically you're only you're scored after the accuracy given a certain score I think 600 and to get even higher score you just use as little characters as possible so of course we want to keep a code to a minimum so there is a few benefits to this technique it's easy to manage and edit you can change sizes and things fairly easily as long as you use percent it can be one single term element if you want to do something more complex you might need a few more and it's kind of fast somewhat drawbacks is that there's no dynamic variable so you can't do anything related to a random algorithm or something like that and you're limited to straight line circles I also missed out but you can do squares and triangles so how do we start so one way we can start is actually we're going to the background the background property of CSS and the part highlighted in red is what we actually care about so you can either declare an image or color you can declare its position its size and whether you want it to repeat or not and CSS gradients there are two kinds one is a linear gradient and the other is a radial gradient so we can abuse this to hack and make some images so let's go to so this is the gradient we all know and maybe not love but this is basically how we do with a linear gradient we put the degree which is the angle which it will go you can also omit it it's quite easy it still works and then you declare where you want the color stop and then the next color stop and then the last color stop so if you want to change this into a line all we have to do is to just be more specific with our color stop so we know that greens stops at 30 then we start yellow at 30 and end at 50 and then it becomes a line alternatively if you are lazy to repeat yourself over here you can just use a 0 common 0 this will also work so it's the exact same result but without having to type that 30 over here you just append a 0 common 0 after every color stop so that is how we make a line next we can try to do some other shapes so here we have a square it's quite easy so linear gradient and then because we don't really want a gradient we just call it blue and blue you need at least two and then this is the back to my notes it is actually the position this is the position and this is the size and then since I don't want it to repeat because if I remove repeat and then it just all becomes blue so we will put no repeat just so that it won't keep repeating itself and then finally this is the other color that will be the backdrop so another way we can do things is once we add a degree we can actually draw triangles so here this is a line first so I just did a transparent 48 pixel then blue then transparent again and then we can actually change the position fairly easily by adding some and you hear then something and then you can move it up right and then if you want it to be we want it to be a triangle we just do this and then it becomes a triangle right and so we can actually change the direction of the angle to maybe what's 45 plus 90 oops but basically you can change how the triangle looks because life coding always goes so well okay so after that now we have triangles we have squares we have lines we want to do maybe something like a circle because that's the only other tool we have so here's the circle same thing we add some color stock to this and then it becomes two circles you can remove one or the other it doesn't really matter you can change the place where it is so you can circle there and then it becomes a quarter circle so you can actually give it like then px and then you can move the thing around so you can also use percentages of instead so that's how we draw circles semicircles we can also do circles, semicircles, quarter circles so with that now we have a few examples so this thing inside this arrow pattern was done using only this techniques in fact it's just using the triangle and the lines other examples is something like this Taiwanese cartoon couple I thought it would be nice to recreate it so this is just circles and I just use a blue color to block this off so that it looks like a semicircle alternatively you can do something like because I work in e-commerce so we always have to mimic how a voucher looks so you can do something that has this voucher kind of a tear-off pattern this is another thing that I saw online so I decided to replicate it and this is one of the CSS battle things which you can actually go to my codepad basically it's just a lot of circles right so next slide so tessellations so how I made this for something using this technique called tessellations there's actually a study here if you go to my notes you can probably go and read out on the study basically there's three regular tessellations pattern that you can do but mostly we are interested in the square because square is the most easy to replicate so how I recreated this I saw this pattern online and wanted to recreate this I cropped out a square where it seemed logical for the pattern to start and end I divided it into segments so that I can draw the lines divided it into segments the other way so that I had this Eureka moment where I saw first there was lines here and secondly there were triangles so I ended up creating that thing out of this and I wanted to do a live demo of this but there's no time so I wanted to show a demo so maybe we think out of a pattern this is kind of simple you can obviously see that the base shape is a square so when we cropped this out we actually found that actually it's only just two circles right the rest of it is kind of just repeating itself so doing this we can actually do so let's we need to start with a lines or a linear gradient completely regret doing live coding oh is there another one live coding always goes very well so that's that so we have something here we want to add a size so zero and then we put some size 100px 100px grid we want the color stop there's a line and then we want to draw another we want to draw a square so there's another line and we change this to 90 degrees so yeah we got a grid awesome then next we want we want to draw the circles here so let's start with a radial gradient and then we want yellow then pixel bro I think you learn to be on say because I didn't be on say to start faster I think can ah black transparent why am I typing out transparent okay I'm pretty okay I think photography must be the one maybe cannot do that so the circle location 30 seconds bro it's not sure okay never mind always when live code doesn't work always go to your always go to your backup which is 30 seconds bro here so basically the idea is very very simple you do your radial gradient you move the circle to the top you move the circle to the left and then let's head back up if you don't say twice you must start dancing new rule okay let's 5 minutes okay come I love these primers there's my new favorite thing okay okay go ahead you don't say okay so hi I'm I'm interested a lot in generative art but mostly using JavaScript and processing but since all the cool kids these days are CSSR I'm trying as well so I've tried a couple of things not using just linear and radial radial gradients but sometimes for simple pieces like these radial gradient works very well for intricate ones that I've done a couple more we'll see later we need SMGs because curves are a little bit difficult so I'm very inspired by peregrine designs for Islamic art so most of what I do is repeat tally over the background so this one I use radial gradient especially because when you don't have a hard stop the gradient kind of disperses and it gives a slight blurry effect and most of the tally is in the space that you can see these days they have this really blurry effect over the background so I wanted to create that so I kind of use radial gradients like 1 2 3 4 5 6 7 times repeated the gradient over circle and yeah just create this one the second bit since this one had this was inspired by a particular Iranian cafe in Mumbai so this was on the floor of the cafe so I tried to take a picture and tried to recreate this with CSS but the curves were slightly difficult to do in CSS so you see the borders and the circles on the borders actually all the circles in this entire image or in this entire piece are all radial gradients the lines are all radial gradients with hard stops and stops but the curves are all cubic beziers in SVGs which are slightly easier than quadratic beziers because cubic beziers are a little bit too difficult to get my head around it so it's just got one control point and you can create the curves I'm doing it for time so the third piece I wanted to show was this one this was another Islamic art piece that I saw in a cafe in Singapore I don't remember which one but yeah it's somewhere around the Kotaung area and so this one was the reason why I wanted to show this probably more of SVGs than using linear or radial gradients except for the brown blur that you see at the center of each tile so that's radial gradient with a very high stop so it kind of blurs into the background with the floral white background so the rest of the checkered board the flourish that you see in between they're all SVG parts I love hand-coding SVGs they're very therapeutic I tell you if you're having a very bad date just try and code a hand-code SVGs so all of these that you see the numbers are dotted by hand and I'm very proud of it so the good part of SVGs you can actually define a definition of a particular part and just repeat it and transform and rotate and it's just amazing because you have to write so much less code I mean it looks very complicated and the flourish looks complicated and the petals look complicated but it's just like one path defined and you just keep on rotating and here and there I have one minute more so let me show you one more so this one see this particular piece so this is again purely SVGs it's just that what I wanted to talk about was the so you know sometimes sometimes when you create images using pure linear gradients or using SVGs the contrast is very sharp it's not real life like but you need some sort of you know there's this word term in Japanese called Babisabi some sort of irregularity in your image so noise does that I mean if you're into gender to art you use a lot of purlin noise to in order to add that little bit of changes over your art so you could do that very easily using SVG filters so this is what it is so you could add a few turbulence which is actually purlin noise implemented in SVG through the basic definition and that's the end of my answer thank you so much last letter for today a pass everybody this gentleman 5 minutes right? however many minutes you're reading me I'll just make you O.P.O.T bro sorry sorry one moment O.P.O.T bro okay so I guess this is the can I change the aspiration hold on your saying waits for no one it's even worse your choice bro no one's on that a while back I was making I was doing something freelance for a friend and I was making part of these hamburger mobile menus and I realised that for my skill set it was quite a nightmare for me to make the hamburgers so I thought having something that I felt was difficult and this is my attempt and pretty quite a couple of hours spent writing everything from scratch so I'll just go through everything one by one and then if there's any questions I'll answer them later on the easiest most boring kind of menu you click on it and cool like it changes right but nowadays with all the animations that people are doing you cannot look bad so the one I actually implemented for my friend's side I did something like this I like to call it the easy simple and easy one where by the middle the middle one it actually just disappears and then I put the for the top and the bottom row I just moved the what do you call it? Origin something origin like yeah transform origin that's right transform origin and then it's all the way to the top the left side so that's just 0% then this is the other direction from instead of this one and then I've got another one whereby this is it got to a point whereby for this these ones onwards I had to I had to start everything first absolutely which was not what I was a fan of but because of the way I wanted it to look it had to be done because I had to do a top 0's, 18, 36 thing and then it had to like move so this was what I did and then moving on I made about 18 I think so I have go this one this one is this is actually one of the only ones that I'm using 4 lines instead of 3 and then it's just whereby the middle part is 2 lines and then it just rotates and then the top and the bottom just kind of fold into the middle and moving on to the next few this one is like this kind of but the top and the bottom go into the middle and then it happens after that and then this is a delay in animation for this one moving on as well this one is these are the slightly more orthodox ones this is the left arrow those quite cute and then the right arrow and I also did the other kind of wait no wait this one my bad do I scroll left and right from here where are the rest of my you are right where's my other hold on where is the oh I scraped one row ok sorry sorry this is the other left arrow and this is the other right arrow the other arrow so I've got this like play button kind of thing or like rewind kind of thing and moving on I have a plus side as well as a minus side the easiest one to make other than the one that has no animation this is probably the easiest one I didn't want them to fold in the same time so I did like a little delay thing and it took me a while to figure out the transition shorthand which I was really grateful to find out at the end and then I've got other ones where this one is this one is a little bit spinny spinny and the last two this one goes on forever this one is the quite cute I feel and then it rotates and it rotates again then this one is the this is the slower version of this in the other direction and then I've got this one where it goes on forever yeah it spins it's a windmill and this is the other direction it was easier for this one the last one is something that took me the last three hours it took me a while to think of I asked my colleagues about it and they're like oh do whatever you want and I decided to do this I would say this is the the most more I've played for this one so this is the side case I've written a little bit of JS as well this thing actually it just does everything at the same time and I'm done I call time right now bye