Internet DNA Podcast
Dan just added another new year resolution to Abi's already full year.... learning CSS animation. Exciting, but I wouldn't let your mum lose on it.
[inaudible] with me happy this week we're to discuss CSS animations. I don't even know if I've got the right term
analogy. There is motion graphics, animation transitions, the movement we see in screens. I don't know what the correct terminology is. So I'm wondering today, Dan, if you can explain the types of animation and movement there is, uh, how, how it's done and perhaps the pros and cons of each.
Okay. So on the web these days is to sort of real types of animation. There's the just pure CSS animation. So that's just getting CSS to animate objects that you've put onto the basically devs that you've shaped and or maybe images. Yeah.
Yeah, but you can, you can mean, you know, you can make dancing penguins if you want the CSS. It's amazing what you can go. I mean, you know, people say, oh, his buttons menus, no, literally half the animation you now see, especially that very flat looking animation is, is done with CSS because it's so lightweight. Browser already understands it. Unless you're on opera mini, you're pretty much, it's fine. And therefore, you know, you can draw a circle and you can make a circle, sit within it. That's just devs basically. And you can then say role, that's an eye and I can animate the circle on the inside is the eyeball. I can make it track the mouse for example. I can use a graphic to create different parts of it. So actually you can do a lot with CSI, may should. And it's, it's actually if you've got a code pen and just have a look what people do with pure CSS, it makes your brain melt or makes my brain melt. But
yeah, I agree. I've seen some fantastic stuff and that is all literally done in page. Yes. Using CSS, like I use CSS styling and everything else.
So instead of that little square element that you've got, it's now a beating heart because you've just
me. No extra software just needs to know the parameters of CSS and and, and what,
yeah. And and to, to have an understanding of how animation works I think is probably the real key. That's the bit where, you know, anybody can probably make the animation, but making it look good that that, that still requires understandings of twinnings and, and a direction and the stuff. But, you know, basically you can time it, you can tween it either in like direction or in size. You,
Wayne is the movement from one position to another. Oh, awesome. From
one state to another. Yeah. So it can be a tween from blue to red for instance. You could change the fill for some time. I think timing function, which is basically are we going to ease it in, ease it out. So does it expanse slowly and then fast or does it expand fast and slowly or does it go slow? Fast. Slow. But basically that's all done with CSS and a lots of stuff can be done like that.
And that's very different from traditional frame animation. Yeah. Because the training is, is filling out those frames that you would have originally done.
Yeah. But you give it your ration so, and you can change
they to ride intended.
Yeah. And then you can chain those together. So, um, it's, it can be a little bit more advanced than you think. But yeah, effectively you're basically saying go from one state to another and maybe back again and then you're, what you're doing is you're making a lot of those work together and then you can do really amazing animations, but that's all done within the browser. That's all CSS and that will get you, you know, 50% of the way to all sudden and animations. Then you get into a thing called html canvas and this is a specific drawing system within html where you basically draw a canvas and then you can basically start to build into it. Um, and you can build lots of things in their circles, can have components you can do. It's quite amazing what, yeah, again, I mean I could go through everything that you can put into it, but what this allows you to do is more like flash where you can start building what we would have traditionally called sprite. So little self managing animations that can then have interactions with other animations. So you can have collisions or you can have hit boxes or that sort of thing.
Right? They've all the, in my mind they're all taking on that. You've got the twenties or the sprites and a bit of collision going on there. Maybe that's an animation itself.
Yeah, so for instance, let's say we were doing um,
I was a sprite when I was at brownies.
Yes. There's this bright really is a little imp. All right. Originally, well that's what, that's what it is. That's what I sprite is originally.
But then back to canvas. Is this a piece of software or
Can you open, hey, CSS animation of a eight TML chem the foundation?
Yes. But why would you
just like you overlay CSM that's on top of,
yeah, once you're at the html canvas object. Yes, you could by all means. But I think it's rare. I don't, I've never done it that way. I'm not saying there aren't reasons why you would do it that way. I've never come across them myself. And then you move beyond that. And, and also the other thing about is that you can, you know, this, the difference between using bitmaps and vectors. So you can use SVGs now. Now the Nice thing about SVGs is obviously they're vectors. So resolution is irrelevant. But the downside is it uses a lot of computational power once you start really putting thousands of SVGs onto a pounds per page. Whereas a bitmap is a bit mappers, a bit map is a bit mad.
SVTS which is what I wants to come on to that I think that I need to investigate more. But with SVGs you do the coding in the file itself, is that correct? And then you just put the file on the website in your code
you caught yes and no. So yeah, you can, so you can do an SVG animation then that's fine. Just a set of vector coordinates with Phil and line modes. So once you have those vector coordinates, you can use Java script libraries to then manipulate that point. They're now starts to move to a different point. Do you see what I mean? Or if it's a circle, you can say, right, we're going to decrease the radius. Or You can do much more interesting things directly through the browser rather than loading the whole animation, which would be a load of code SVG. All good for things when you're doing large scale, fairly subtle animations. Um,
and where do I create an SVG animation or illustrator or is it still put them in? You could do it on a page.
You can create it as a code on a page. It's not about,
they still do it in your html editor. Yeah. And is the Svg code exactly the same as html
in Svg? It will provide, if you let shea, I create, uh, an illustrator Vacca and I export it as an Svg. Really exporting is where are the points? Yeah. It is literally illustrator. I as, as simply as you can get it. And one thing we haven't talked about obviously is a thing called web a. G. L. Yep. Um, what is web? Web? Gl is a web renderer really, but it allows you to do interesting things like create proper three d objects, um,
well that sucking all the bandwidth. Yeah, exactly.
oh, that's supported by all browsers now.
Pretty much. Yeah. Well just be, you know, in the way that when they, almost everything now is delivered as a library. So, uh, I guess if you're doing three d animations now, you'd probably use a thing called three js. So you load the three js library and then it handles all the browser monkeying about
for you. But if you creating three d animations for oh website, what would you create the animations then again, would you do it straight into the html or would you create that in some software and use the web GL to implement it?
Let's say I was great in let's say a box for instance, that's going to, I don't know, spin or turn or whatever, create the original well at box, I would just literally by hand coding, but let's say I was doing a logo, I wanted our spinning logo for some unknown reason, um, in three d three d with flames on it. Now what I don't want to do is have like an animated Gif. Yeah, yeah. Because that's a nightmare. Well, because the problem with an animated Gif is that every, every frame is another image.
Yeah. So animated gifs these days are just, yeah.
for what, what's fascinating is everything you've talked about is it today, it's done in code, it's gone back to, I don't know, 15 years ago where everything was done in code before it even started moving into,
Say that I have to become the year.
Right. Just caveat this revised listening. A badger is a young, very bright, ready to learn person that human. Exactly. And then they get, and then they go on. Exactly. They go on to do great things. Yes. Okay, keep going.
Yeah. Okay. That was, I was thinking would you recommend a piece of software that a designer could create animation and it spits out code, but your answer is no.
Well, I'm sure all that res, but what I'm saying is, I can't remember the software you used to use were used to bundle those things on a page and it would make the html for you. But yeah, maybe, but it doesn't take long for you to progress beyond that to where it's just, it's just actually easier to hand code it and it's cleaner and neater and it makes for a more pleasurable experience. Um, and maybe that's because I come from it from a technical, so I find that sort of thing enjoyable. But I mean,
oh, there's nothing more exciting as a designer when you think coding feel comfort zone and you get it. I love that feeling. I, I feel like I've really achieved something that day and so, and so I, yeah, I think coding it is very good advice as opposed to looking for a piece of software that then spits out the code for you. I, uh, oh, by the way, I stopped in the way I think I will start is finding other people's animations, putting them in, adding to the editing down a little bit. And then from that, I start to recognize and be able to push the code a bit further. Having got some great animation from Code Pan or somewhere like that of people who are incredible at sharing.
Yeah. Places like stack overflow are literally full of people who are as excited as you, who know a little bit more than you. And so it really helps, you know when you say, oh, we're trying to do like this. And they go, really? Because you could do it like that. And you learn a lot about animation techniques. And so, yeah, I, I mean, I just, I mean, I as you know, I love learning. That's why my favorite thing of all time. So, um, I've really enjoyed it and I, it's not beyond anyone. Anyone could do this. Well, any, anyone who, who knows how to write html and CSS, which is everybody on the planet can learn enough gas to, to, to animate at least interesting animations. Maybe not world class award winning animations, but you know, how many times do you actually get asked to make those,
okay, I'm just going to frack tech. I don't think everybody on the planet knows how to Code in it to Matt and CSS today.
No, but they could I, well, I'm saying is that not technologies that are difficult to understand.
I thought, I thought you had a grand plan that everyone did and I was thinking of my mother and my husband is too. That probably didn't.
I tried to in 2018 it was going to be my thing to do an animates and each week I like fail miserably.
Oh, reinstate it for this year.
Yeah. Go and have a look at anime job dot js. I think you'll really like it. Alamay dot. Js. Yeah. Yeah. Thanks.
Increasing my workload this year.
My happiness level. Thanks for increasing my happiness. Yes, exactly. So what are we going to talk about next week? I don't know. What are the things that bother you at the moment in the Internet? I think I need to know a little bit more about screenless. Oh, really? Into faceless. So not just Alexa designer. I'm going to have to start including this into, into what I do. And so perhaps an actions. Wow. No, we don't do that next week. Maybe we need to do that.
No, let's do that. Thanks for your lecture skills and love those [inaudible].
Dan & Abi work, talk & dream in tech. If you would like to discuss any speaking opportunity contact us.