Leveraging HTML5 Animations Using CSS3, Ember.js, and Friends

Jessica Jordan speaking at Ember London in November, 2016
972Views
 
Great talks, fired to your inbox 👌
No junk, no spam, just great talks. Unsubscribe any time.

About this talk

In her talk, Jessica Jordan teaches why open web standards are important for creating web animations today, and how you can create your own using Ember.js, CSS3 and useful JavaScript libraries like Greensock and Processing.js.


Transcript


[00:00] [music] Jessica Jordan: [00:12] Hi, guys and girls as well. Welcome to the Ember Meetup and also to my talk that I want to introduce you right now. I will be talking about animations. How to do HTML5 animations nowadays using CSS3, Ember.js, and also other JavaScript libraries that you can plug in to Ember to make a nice, rich rep experience. [00:32] My name is Jessica. Jamie already introduced me. I'm currently working as a Web developer at Earlham Institute in Norwich. Didn't know it before I moved there either if you wonder, but it's a really lovely city. [00:44] Before I'm starting with my talk, I would actually give some introduction what I find really interesting about animations. I can remember when I was still a kid, I would always watch this Disney movies. Maybe you've also been a fan of "The Lion King", or maybe "Snow White", or "Cinderella". [01:05] I always knew that when the VHS tape came to an end, actually the best part would come. It was always this making of how the animators actually created this Disney movie. They would show these people actually doing all the work. What I found really interesting with this is that...Does this work? [01:37] [pause] Jessica: [01:36] These people explain how they do the animation and how much time and effort they actually have to put into doing these drawings. They're just sitting down for like 10 hours a day, just doing one frame after the other. [01:50] As a kid, I was really impressed by this. I was like, "I totally want to do this when I get older." I want totally want to sit in a room doing all these drawings for hours on end, for a year maybe, until there's a final product. As you can see, my plans have changed a bit when I got older. I have to blow out. I got more into Web development and doing other things. [02:19] I was still really interested about animations for a long time. When I got into front-end development, I actually found out that there are still already a lot of people doing animations and trying to create a lot of multimedia content for the Web. [02:34] As I can see, probably many of you are already really experienced developers. Maybe already working for 5 or 10 years in this kind of area. I would like to ask you what do you think is the one main multimedia platform or software that people have been using maybe for the last 10 to 20 years in the Web to create animations, games, like rich [inaudible] applications. Anyone have an idea? Audience Member: [03:00] Flash. Jessica: [03:01] Yeah, exactly, Flash. Flash was a really big thing. It still kind of is. When Flash popped into the world, a lot of people were doing anything with Flash. They were creating games and animations, but also whole Web applications. [03:18] We put them online for people to experience because back then this was the kind of thing you had to do if you wanted to create something a little bit more advanced than a static HTML page. [03:28] Flash is actually really powerful. But the truth is it had, although it's a really awesome platform for creating animations, some kind of issues. For example, at some point maybe you remember just a few years ago, you would go sometimes to, I don't know, YouTube. Try to watch a video and then it would say something like, "You have to upgrade your Adobe Flash Player, otherwise you can't do this." [03:52] Then this pop-up shows up and you have to install some new plugins and you realize this whole experience isn't that smooth anymore. YouTube by now uses HTML5 to deliver their multimedia content. This shows really nicely how Flash evolved over the time. [04:12] Also, if you look at the stats, you're seeing the development of Flash and its usage in Web applications, you will realize that in the last five years it has drastically declined from maybe 50 percent of Web pages still using Flash in 2011 to only 18 percent in the beginning of this year, which is not too much. [04:35] Now is the question, maybe Flash is just a thing of the past? Maybe it just was an awesome platform and what do we actually do now? Luckily, Flash is not alone anymore. Finally we have something new, coming up on the horizon, shining. [04:55] It's HTML5. In this talk when I refer to HTML5 I want to use it as a collective term for all kind of open Web standards that you can use to create multimedia content, to create animations and many other things. [05:11] The interesting thing with HTML5 is that it's an open Web standard. Therefore, it comes also with the benefit that gives it much more independence compared to maybe proprietary software like Flash. [05:30] It also makes it much more consistent to use across different browsers and devices. This was example also like an issue with Flash before that is much better served and will also be better served in the future continually. [05:44] Also, the availability comes from the consistent point of view that you can actually reach the users without having to worry about them installing and upgrading the plugins to make use of your Web experience. As you can also see here, a very nice infographic. Flash doesn't get to the iPad it seems, but HTML5 can do all these wonderful things. [06:08] HTML5, therefore, is a valid alternative to many things that you have done with Flash. We already said videos, for example, on portals like YouTube but also delivering audio. Also, doing games, a lot of Flash games. I really love them back in the zeros to just play maybe also Space Invaders, we hear later about maybe. [06:32] Also a great thing, animations. We can also do them with HTML5. In this talk, I want to mostly focus on this part of HTML5 and its possibilities. By the end of the talk, you should probably come out with some grasp of why open Web standards are actually important nowadays and actually, what kind of different tools you can use to create your own animations. [07:01] We have a diverse set of Web centers to choose from. We can use HTML5. We already declared this. This [inaudible] would mean the use of markup language but this also includes other features like, for example, the Viotech or also other more advanced features than just plain markup. We can use CSS3, which is also an important thing. [07:24] I will get later into why it's actually really cool to depend a lot on CSS3 because it makes your life as a developer really easier also, regarding performance. You can also use JavaScript obviously. Stuff like, for example, MBJS to create your Web experiences. This is not everything. [07:42] There are many, many more that you can grasp under the term HTML5, SVG, WebGL, XML, and many other open Web standards that are already out there for you to use in modern browsers. Nice noise. [07:57] Let's focus on CSS3 for now. In this section, I want to introduce you to one specific aspect of CSS3 of the standard and why I think it's really cool to use nowadays for many aspects in your Web applications. [08:12] For example, CSS3 transition -- probably everyone of you have already have made some familiarity with it -- is a really powerful concept. It actually means that every time, when I describe a specific property in my CSS to a class, I can actually do a nice smooth transition between the first state without the class, and the other state with the class by just adding a transition declaration. [08:40] You have this transition declaration up here in the animation demo. Here would, for example, be the change in class that we added to our element. If we do this, then we see OK, there's a wonderful zoom onto a nose. This is what we want. [08:57] The cool thing is with CSS3, it's actually really powerful because you can just plug in these transitions into any CSS property that you would like. What you...OK, first for this one. The cool thing is, as well with Ember, you can easily make use of this with classNameBindings. [09:19] You could, for example, if you had a zoom in component, declare in your zoom in component JS file that you would like to toggle up property and yeah, bind this actually to the class that you want to add to. This is really powerful because it's easy to setup. Only a few lines of code and already we have something working. [09:41] The cool thing about CSS3 that you have to keep in mind if you're using it, you can actually transition all properties that you would like to but there are some properties that are more efficient for the browser actually to handle in transitions and the others. [09:55] There are certain properties you can use that are really fast because they will when actually the browsers renders this transition only be involved in the specific process in the end of the rendering process, and therefore not take too much of the capacity of the browser? [10:16] One of them is position. You can do this with a transform property. Also, scale. If you use transform, you can use the scale command. Also, rotation is a good one that is performed in browsers with the rotate command, and also opacity. [10:32] This is also just good to know. If you would like to animate and transition a lot of different DOM elements. Keep this in mind. This is also [inaudible] on the browser if you are using any other of these four properties in your CSS. [10:50] This is a really good thing for us of all right, but I know probably most of you are also really interested in actually JavaScript, and go like, "Well, I'm not really a designer, so, uh, I can't really be bothered to write the CSS all day." [11:06] The cool thing is there are a lot of CSS libraries already out there. Probably every one of you have already used bootstrap, Materialize or something. But there are also CSS libraries that are really specific only used for, for example, doing CSS3 transitions? [11:19] You can use something like Animate.css. It's not the only one out there to use for this. They have a long list of different transition animations that you can just plugin into your template, and add on command to your elements. This is already the part with the CSS? Next, we just have a short look at some libraries that you can use to make it even more powerful. [11:47] When I had a look at what kind of animation libraries you can use, I was a little bit surprised when I started with animation, also, in Ember. I just picked something that I thought, "Ah! This sounds actually really cool. Let's just go with this." Now, for this talk, I want to have a sum of what is actually out there. [12:16] Then I realize that actually a lot of things. We have Liquid Fire. I haven't talked about it at all in both the Ember talk, I know. This just one of the tiny things that you can actually use for doing JavaScript animation. [12:27] For example, D3 really obvious if you want to do data visualization, and also have it nicely animated? We have a lot of other things that I just found -- jQuery as well. So big, it already goes out of the slide. [12:41] We have anime.js. I've never heard of this before, but three.js and Velocity are probably like terms for you? By the end of just seeing all these things -- and there are many, many more -- I was like, "Wow. This is actually quite a lot." [12:54] An example of what you can do with JavaScript in Ember? I just picked one of these. I want to present here in the HTML, GreenSock. This is also a JavaScript library you can nicely use to do many things that you used to do maybe in Flash if you ever worked with Flash before. [13:15] A lot of nice animations and transition that you can also plug to objects that you have, and make them also really nicely feasible with Ember. Because it's always interesting in talks to have a definition of what this library's about? I thought maybe to spice it a bit up. [13:36] I just picked the most funniest slogan that I found on a website. Here we go. "GSAP is packed with features that make most other engines look like cheap toys." [13:46] [laughter] Jessica: [13:48] Hold on tight. This will be really cool stuff. The basic concept of GSAP, or GreenSock, is based on that you can create specific tweens? A tween is like a subunit of an animation, and you can configure this to your terms with an object that you declare. [14:09] You also have duration for how long the animation should last on. Then you have a configuration object there. There are different properties you can use from, and you can also bind into specific event hooks that will, for example, call another function for you that does something else once the animation's completed, or maybe plug it in with a new animation. [14:33] This is a basic concept. If you would like to find out more in general about tweens, it's also really cool. There's actually Ember Addon already for this, ember-tweenlite? [14:45] Also, there's a really cool talk by Jamie already who also talked about how to plugin GreenSock into Ember.js. This is also really cool to see. The interesting thing for me was, when I started with this, I realized this Ember Addon, ember-tweenlite, exposed a subset of methods in GreenSock that is really cool to use. [15:09] That was not really suitable for what I wanted to do? I realized, "OK. Let's not use the Addon, but actually install GreenSock as a Bower dependency." What I found there's really cool. [15:23] If you, for example, add the whole GreenSock set up, you also have access to a method, or like a constructor called Timeline. With this Timeline, you can actually do something really nicely, similar to conventional animation that Disney did in the '80s. [15:43] You can actually do animations in frames? You can create nice sequence of different frames that you want to like to animate. Once you've, for example, create an instance of a Timeline, you can also add different tweens to it, or create tweens on the go. Then use this sequence to play further with GreenSock. I can also show you in the next slide how this would actually look like. [16:10] Time for a demo. Let's click on this link, and see how this goes. We have to do...Have 12, 11. Super. [16:22] [pause] Jessica: [16:22] Let's see. Let's just click here. Perfect. [16:47] When I started with this, I didn't really know how to begin with creating something animation based. I wanted, for example, to have a component that would show me a sequence of images, so in the end, it looks a little bit like an animation with the elect plate and sequence. [17:04] First, I started with creating different sets of imagines that I would load separately, and put them all in there. Then I realized, "Oh. It, it always blinks on every [inaudible] ." Then I realized, "Ah, actually your Sprite's for this." [17:19] If you have a lot of images, you don't want to load all the different images separately. You want to do this all in one request. I created a nice Sprite image, and then I twiddled a little bit with GreenSock. [17:41] If, for example, I didn't use the Timeline, I could do something like this, that I just have my Sprite in the background. Then I can play a little bit with the CSS properties so the background is put up and down. [17:52] Now, you go like, "Mm. OK. I don't really get this. Like, looks like a slot machine. Doesn't make much sense." [17:57] [laughter] Jessica: [17:57] That's true. Just to show you the shortly...actually, I then found out what I want for the animation is that the different Sprites are always shown independently after each other. Then, with another try I then found out, "Ah, OK, it's all about positioning and how you get the image in." There I figured out, "OK, this is like how you should actually do it." [18:29] I know it looks really fancy, five different frames. I know. The cool thing is I found out there with GreenSock is that I can nicely dynamically also plug into the sequence and do different things like playing the sequence, browsing the sequence, also pausing it. [18:53] In this component, for example, I just create a control that you can just click and then it stops and starts again and just bind actions to it that then then will shot to the parent component. [19:11] In general, with the GreenSock API, I realize it's also really nicely to actually add different tweens to the timelines, as I already explained earlier. Then also for the different frames that I actually have to create new tweens that are all added to the timeline. Here you can also see that it's really nicely, once you have this time line object also to plug into with the play and pause methods. [19:46] This is just a quick peek into what you can actually do. There's much more. I really hope that now that you've seen a little bit of HTML5, little bit of CSS3, and a bit of JavaScript that you realize Web is used to animate. [20:11] That's already it for me. Thanks for your attention. If you would like to have irregular tweets about Ember.js and food, follow me on Twitter. Or if you'd like to give me some feedback or something, also send me an email. Thank you. [20:26] [applause]