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.
Transcription
[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.
Images.
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
CML codes? You now you're stocking use javascript. You're using things like are you using the html, what's called the dom and methods that are document object man method. So you're using things like get element by ID and that sort of thing to be able to access different elements within the canvas to animate them independently. Or you might have a little function that runs over every, so let's, we were doing space invaders. The invaders would all be a sprite one sprite. You don't want to load 50 different invaders. You want to load one sprite and then you're going to tell it it's position and then you're going to tell it what color it should be. So if it's top row, it's red. If it's bottom row, it's white. I can't remember how they work. But do you see what I mean? Then you'd have another sprite, which would be your ship on the neath and it could fire another little sprite, which would be the bullet. And then if the bullet hits an invader sprite, then we go into an animation for that. Sprite only. Yeah. Not all the sprites don't explode cause that'd be weird.
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.
So yeah, again, it's javascript. So only runs thing about javascripts is only, only runs when you need it to run any runs in a single process where you can make it run and more. But um,
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.
Well, well, yeah, because effectively what you're really doing is taking for 25 frame animated gifs. You were actually taking 25 gifts and you're sticking them together. Yeah, yeah, yeah. Not a good idea. So, um, so that's why we don't do that. So, um, let, let's say we did want to do a logo, so we would, we'd do the outline of the logo in illustrator, export it as an Svg, and then we would use something like, um, three js and say, right, make this into three d transform. And the rotate it. Yeah. And we use it, the library's functions to create that cause you don't want you, you, you or I or any normal person would not want to write that kind of javascript library or the javascript that's, that's using, well, I mean, I think they use, it can use either CSS three D or Web GL.
Um, I don't use it so I'm not that knowledgeable about it. I use a thing called an Ama and that just, you mostly uses a CSS properties and that does CSS transforms or it does dom and it allows you to chain lots of multiple animation and, and synchronize different bits together, create timelines and so forth. So I like that because it allows for the kind of animation that I'm doing, which is usually, you know, I've got a hero section and I want these kinds of animations going on in the background. That's the kind of animation I do. I'm not creating cartoons or anything. So for that kind of animation where I want some interactive visuals going on in the background, I use anime because I find it easy. But it's just another Java script language. Yeah. Yeah. So you basically just include anime dot js into your head and then you can just write out the javascript code
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,
well, we'll get you back to Ramu when these little battles. Yeah, yeah. It's the writing. It's writing animation. I mean just, we talked about this with cloud last week. It's about everything is going into code. Everything is moving into code infrastructure as code animation, as code, images, as code, you know, and and reason for this is if you want to shift stuff around the world, if you can just say, I'm not going to shift an entire server over there, I'm just going to send some code over that and then Papa server up or I'm going to just send this animation as a bit of code and then it will run when it gets there. I don't have to load 17 mix of stuff and that's why it's going that way. And I think more and more you'll see this, right? It is, oh what if you're a designer? You know what? I'm going to do that. I guess there's two things. First of all, javascript is easy.
Say that I have to become the year.
Well, I mean like you learned CSS, you learned html. Well the holy trinity then is is you need to learn javascript. And I think that people get frightened of javascript cause they think, but actually I've got a new badger. He's learning Java script because I'm making him do lots of stuff with.
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, so and I said to him yesterday, you know how you getting on? And he was like, wow, this javascripts quite fun. And actually I think because with javascript you quite quickly are able to do things that makes you go, Ooh. Then it's actually quite fun language to learn and you can learn it in bits. You don't have to learn all the complicated stuff to do the stuff that you want to do. Do you see what I mean? So actually I think there's a, as a designer you wouldn't call yourself a web designer. If you didn't know html, you wouldn't call yourself a web designer if you didn't know CSS. And I think really we're moving into an age or probably moved a few years ago where that javascript or even at a basic, I know how to animate. I know how to get hold of elements. I know how to transform them.
I know how to stick a content into something or take it out of something based on something you know, which is you could learn in a week. I'm not saying you need to be able to program really complicated javascript structures. Yeah, that will take longer, but for the most stuff that a designer wants to do, you learn it in a week and so I think that yes, that's, that's where designers now are enabled. You don't need to have some special guy having battles in his code to do things anymore. You could learn it literally bit by bit. I want to be able to do this and then just learn how to do that and then the next bit and it slowly it will go through to your head. You start to understand how it sort of hooks together. Okay.
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.
No. Maybe of all the people. Well I actually, I think your mom would be able to pick how html, CSS pretty fast. It's not rocket science. Like the basics are really simple, but the more involved you get, the more interesting it becomes. It's like any subject and javascript are saying so you can get the basics very quickly, but the deeper you walk into that forest, the more dense it becomes. But I think you should add javascript to your toolbox. Javascript animation is the thing you should do for Tuesday. Talking about resolutions for 2019 I've just added you one.
I tried to in 2018 it was going to be my thing to do an animates and each week I like fail miserably.
2019
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.
Yes.
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.