 Thanks for the intro, Rob. My name is Yvonne Yip. I am the author of Neon Animation, and I'm going to talk to you about how it helps you make awesome animations in Polymer. So animations are a really important part of material design. If you look at the spec, you can find examples of animations everywhere, like how a UI element reacts when you interact with it. If you use an animation to switch between two views, it helps the user understand how the application works by creating a relationship between the thing you interact with and new view that's coming. So it's such a core part of the design language, and not just at Google. We want to build something in Polymer to help you build these effects. So in Polymer, we like to say everything is an element, and that includes animations. It turns out if we make animations elements too, that leads to some really nice properties. So the first thing is animations become reusable. You can build it once, and it will be nicely encapsulated in elements, so you can easily reuse it in different places. So to go with that, we want to build a system that's pluggable. So think about a dialog where when it opens and closes, you want a different transition to run, or maybe the animation that it comes with is not what you want. You want to be able to swap out different effects easily. And also, it's really awesome if the animation you're trying to reuse is exactly what you wanted, often it's just not quite right. So by making them components, we can build in the flexibility to let the user configure it. So it's the effect that you wanted instead of what the author of the animation intended. And if you're the author of the animation, the abstraction allows you to do whatever you want. You also get great Polymer features that make it so easy to use. That's super important for us, because it became performant animations is already really difficult. We want to be able to encapsulate best practices to make a good animation, especially when they become more complex. So in Polymer, we always want to use the platform and embrace any new emerging technologies. So we can build this using CSS animations and transitions, or you can just do it raw on JavaScript. But there's actually something better. So in Neon, we use something called web animations. It's a W3C specification. It defines a unified model for CSS and SVG animations on a web platform. It provides a scripting API to the animation engine. So currently, version 1.0 of the spec is implemented natively in Chrome and part of it in Firefox. And there's general support among other browser vendors. But for now, for these other platforms, we have a Polyfill. So the API gives you a bunch of great features, including nested in sequence animations. You can program animations with groups and timing delays at runtime without writing CSS. It gives you playback control, so you can play and pause, slow down, or speed up an animation. And web animations run off the main thread, so they are jank-free. And I really think it's the future of animating things on a web platform. We want to make it even easier to use in your Polymer elements. So let's dive into how Neon animation works. So let's look at how we build this example in Neon. This actually comes in the package as one of the demos. So in Neon, we divide all the different elements into either their animation or they can be animatable. So an animation element is the animation effect. It's independent of the target that's animating. You can apply it to different elements. So one super simple example is the sliding effect in the purple bar. Or it could be something more complicated, like this effect where all the cards are flying up. So what this effect is is basically a slide-up effect applied to all these different cards, but with a delay in between. And we call the animation target the animatable element. So it could be a dialogue, which is animated in different ways. Or just like a regular element can be composed of different elements, one animatable element could have child elements that are also animatable elements. So in our example, this whole view is a single animatable element. OK, so building an animation in Neon. So here's the actual source code for slide-down animation in Neon. It implements the Neon animation behavior. And we registered the animation with the tag name. So in this case, slide-down. So the configure function is where the animation gets set up with the animated target and also where you pass any options, like different timing parameters. So each animation could define other config properties. So for slide-down, you can also pass in a custom transform origin. So to build the actual animation, we return keyframe effect from configure. And keyframe effect is an object in web animations that animates keyframes. So what are keyframes? It's a cell CSS properties and their values at a particular point in time. So the system interpolates between these values to create a smooth animation. You can use any CSS properties and the keyframes before performance. You should stick to opacity and transform. That's because modifying these properties, they don't trigger paint or layout in the browser. So you avoid jank. And usually, browsers who have optimizations for animating these properties. So you can have as many keyframes as you want. You're not limited to two. By default, they are spaced out evenly, but it's configurable. And you can have multiple properties in a keyframe. And the thing to make sure is in each keyframe, you should define the same bag of properties. So the system knows what value all the properties have in each keyframe. And if you do have different ones, then you can put them in an array in a group effect. So group effects, you can use that also if you want to make one animation that animates different nodes. So they're running parallel. So it will be really painful if all the basic animations that you want to do, you have to create something like that by yourself. So in Neon, we have a library of built-in effects that you can use to build your animation. So we include different kinds of transforms and fades. And there's a bunch of other ones that we'll talk about in a little bit. OK, so we know how to make an animation. How do we use it? So one way is you can just create the animation elements and call the APIs yourself. But there's tons of boilerplate every time you want to animate something, so we made a behavior for that. And this is called the Neon Animatable Behavior. So when you make something, Neon Animatable Behavior, that means it contains objects in this local DOM that can be animated, or it itself can be animated. So in our case, we made a whole grid animatable. So I omitted the template here, but you can imagine a template would contain the purple toolbar and then all the cards that are flying up. It also implements the Neon Animation Runner behavior. And that gives you the API to play the animation. So you might wonder why we need a separate behavior for that. And that's because usually, we like to make our elements and behaviors really focused. And you can imagine a case when something is animatable, but it itself is not responsible for running the animation. And something external is responsible for doing that. So Neon Animatable Behavior, it adds support for a configuration object named Animation Config, which is where you declare which animations you want to use for this element. So here, we're setting it in Ready, so you always get the same options. But you can change this object anytime before the animation is played. So to use slide-down animation, we set the name property to slide-down. And we want to animate the purple bar, so we set no to this dot dollar dot purple bar. So this dot dollar is a Polymer feature where you can reference the node in your template by the ID. You can also pass in any options to the animation in the configuration object. So a common one is timing. That's where you can change the default duration, delay, or apply an easing to the animation. So any timing you pass in is in milliseconds. So in this case, we set it to 2,000, and you can see that the purple bar slides down more slowly. So you can pass multiple animations in the configuration option if you want more than one animation to run at the same time. So here, we want slide-down and cascaded animation to run concurrently. Cascaded animation, what it does is it applies another animation to a group of nodes with a delay in between. So here, we are using a custom transform animation. It's just sliding something up. So we could have used slide-up also, but it was a good time to show another animation that comes with the package. And another thing you might notice is in cascaded animation, we don't set nodes here. That's just because there's no space in the slide, and we can just use query selector to pass the nodes in. So the animations in an array, they all start running at the same time. So if you want to sequence it, you can add a delay using timing. So here, the purple bar slides down a little bit after the cascade effect. So you can associate different animations within a component that's useful for when the same nodes is being animated in different ways at different time. And to do that, you set animation config to a map. So we'll just call the one which is build entry, and we'll add exit that all the assisted slides up the purple bar. So we saw play animation API earlier. If you have more than one animation defined, you can pass an argument to this function. And here, it will play entry. So something to remember is the animation effect, it doesn't persist by default after it completes. So that means if your animation is changing states, so for example, you're animating something from visible to invisible, when the animation finishes, you need to apply the finished state, so invisible. So we have an event called neon animation finish, which gets fired when all the animations are completed. And in the event handler is where you should apply your final state. So the reason we make you do this yourself is for debugging. So right now, if a style gets applied because of web animations, it's not really easy in the dev tools to know why it got there. So we thought it would be easier if we managed to state outside of your other methods like CSS classes or if you're applying inline styles or something like that. OK, so now we know how to make animations and use them in an element. So let's talk about page transitions. So we call something a page sensation when you're switching between two views. So it could be something really simple, like here where we're sliding a view away. Or it can be something more complicated, like switching between two views that are totally different in a single page app. So let's add another page to this example. So when we click one of these cards, we want it to scale up like this. The element we use to do this is called neon animated pages. So it itself is based on top of the ideas that we talked about. It implements neon animated behavior because it contains the pages that are being animated. And it implements neon animation runner behavior because it's responsible for running the animation. So the way we think about an animation is we break it down into two parts. So before I was talking about multiple animations in an element, I picked the name entry and exit. I actually did that on purpose because they're the keys that neon animated pages looks for when it runs a page transition. So entry is the animation that gets played when this page comes into view. And exit gets played when it goes away. So when you switch from page A to page B, the exit animation plays in the outgoing page. And the entry animation plays in the incoming page. And together, they form the whole transition. And remember that the configuration object is you don't set it one time. You can set it whenever you want. So depending on the two and front pages, you want to run a different animation. You can totally reconfigure that before you do the actual page switch. So to use neon animated pages, we nest the pages managing in the neon animated pages object. So we'll make the first page the grid that I showed before. So the second page would be the bigger card with a color background. And both of these pages, they should implement neon animatable behavior. So the currently showing page is selected. So when you change the selected property, neon animated pages will show some high appropriate pages for you and also place the animations. So I talked about when you use neon, you have to manage the states yourself. But for neon animated pages, we do that for you. So usually the way I like to build something that has a page transition is I would build a static DOM without animations and get a lot of your working first. And then work on using animation config to add the effects I want. So let's go back to the example. We want the card to expand to fill the screen. So in both views, you have the same card. So how do we get this working? How do we get a single animation working across two pages? So we call that a share element animation. So that means we're animating elements in totally different DOM sub-trees, so they look like they're single elements. So the way this works is in both the incoming and outgoing page, we define the share element property. So when a system runs the animation, it uses this property to look for objects that should be matched together. So this matches this $.card in the full-size page with the tab target in the grid. So we identify the pair with the key card. The animation that does that is called hero animation. So what it does is it finds the share element in the incoming and outgoing page, and it scales the element in the incoming page so it looks like an outgoing page and then makes the transition go. So we also tell it the ID to share element ID to look for. So in general, if you have two configs that have the same ID, they emerge together. So you can actually use that to define different configuration properties in different places. And if the two configs, they define the same property with different values, then the behavior is undefined. So here's what the transition looks like with just the hero animation. You want to also have a background just popping in. It doesn't look super awesome. So let's add another effect to make it ripple out from where you tapped. That comes in the neon package as the ripple animation. It's also a share element animation because what it does is it takes the background from the incoming page and scales it according to a geometry of your tap target. So let's wrap this up by adding a few more animations. So we also have a transition to switch back to the grid. So with just back to the grid, we can slide up and scale the big card, and we'll fade out the background. For the incoming page in the grid, we'll just reuse what I built before with the cascade and the slide down. So here's the full transition with one way and the other direction. So we haven't written very much code to build this. We're just reusing elements that come in the neon package. That's something that flows naturally when we make everything an element. You might think that one Lego block is not super interesting, but when you combine a bunch of them together, then you can make something really cool. OK, so we covered a lot of material today. So here's a bunch of additional resources you can look at. When you check out the neon package, it comes with a bunch of different demos. And also on the element catalog website, you can find the API docs and a guide that goes into a little bit more detail about how all the configuration works. And Rob Dodson, our emcee, made two awesome polycast episodes, one on using neon animation to make an animated element, and also one on using neon animated pages. And they're pretty awesome, so you should check them out. OK, so that's it for me. I'll be around the floor after if you have any questions. Thank you.