 Hey there, Polycasters. Rob here. Animation is one of the hallmarks of a really great web experience. Not only does it make your app just look cool, but you can use them to navigate the user from one area of interest to the next. And ultimately, that makes everything much more engaging. Now, in a previous video, I showed you how to animate a single item using an animation behavior. But today, I want to teach you how to animate whole sections of your app, bringing shared elements from one state to the next. And to do this, we're going to use a component called Neon Animated Pages. OK, so this is the first thing we're going to build. It is a very simple application. And we are going to add a little settings menu to this page so that when you click on it, it's going to do some really nifty transitions. It's going to actually slide the other page in. And when you cancel it, it's going to push the old page back over. So pretty cool stuff there. To start off, we are going to jump into our index file for this project. And the first thing we're going to do is we are just going to load in some imports. So we're going to pull in Neon Animated Pages, as well as the Iron Flex layout classes, which we talked about in our last episode. So we can use some layout classes. And then down inside of my body, I'm going to just drop in a DOM bind template so I can use data bindings in this space. I'm going to add a Neon Animated Pages element right there. And you can see that I've also gone ahead and actually applied some of those layout classes so that my body is using Flexbox to allow me to, as you'll see in a second, flex the Neon Animated Pages element so it takes up the entire screen. I'm also going to give it a selected attribute. And this is just like what we did in our Iron Pages demo last time, where Neon Animated Pages is going to look at whatever these selected indexes and display that child. So if the selected index is 0, it's going to display its first child. If it's 1, it'll display the second child and so on, just like Iron Pages does. So that gives us a little bit of a boilerplate to work from. I'm going to add an ID to this template so I can select it down in JavaScript. And then I will write out a little script tag and just go ahead and query selector for my app there and give it an initial selected value of 0. So this way, Animated Pages is going to try to display its first child. We're going to drop in two more elements, List Page and Settings Page. Those are going to be the two elements that we're going to transition between. So I'll go add some imports for them. And then we are pretty much ready to rock. So let's start by defining what the List Page is going to look like. So we can switch over to that tab. And it's a pretty typical element here. I've got my style tag and my template tab collapsed right now because they're full of just placeholder markup. So if I expand that, you can see there's a bunch of HTML in there. But you don't actually need to worry about any of that because it's all just dummy placeholder content for the sake of the demo. So a lot of stuff, but you can pretty much ignore it. To get rolling, though, I'm going to import a few items here. I'm going to import the Neon Animatable Behavior, which you might remember from our previous episode on Neon Animation. And then I'm going to pull in two animations, Slide from Left Animation and Fade Out Animation. So Slide from Left is going to make the page appear to come from outside the left edge of the screen onto the center of the page like that. And then the Fade Out Animation, as it implies, is just going to have the page fade out. So then let us go down here. And like we've done in previous animation examples, we'll create a Properties Object. We'll create an Animation Config property. And then I'm going to give it two animations, an Entry and an Exit Animation. And we're going to use those animations that we imported. So our Entry Animation will be Slide from Left. Our Exit will be Fade Out. We also need to remember to include that Neon Animatable Behavior. Now, if this does not look familiar to you, please, please, please go check out our previous episode on Neon Animation. So that will explain how these behaviors are working and give you a little bit more context. But for those of you who are familiar with this, we can just kind of steam right along. So we've added that behavior. We've got our Animation Object all set up. So the list page is pretty much done. I think we're ready to switch over to our Settings page. And again, it's full of dummy content in the template and in the Style tag. So nothing that you really need to worry about there just yet. But we're going to do the same thing. We're going to import the Neon Animatable Behavior. And then a couple transitions, Slide from Right and then Slide Right. So Slide from Right means basically come from off screen to being on screen. And Slide Right means you're already on screen, push off to the right-hand side. Cool? So just like we were doing with our list page, we're going to go ahead and implement the behavior. So we're going to roll in Neon Animatable. We're going to create a Properties Object with an Animation Config property, Intree and Exit Animations. And for Intree, we're going to say that we want this guy to, I believe we're going to slide in from the right, yep. And then from Exit, we will slide out to the right. And both times, the node is just going to refer to this element itself. So we've got our two pages. They've got their animations already set up and ready to go. Let's switch over to the browser. We can actually preview this. And what I'm going to do is a little DevTools trickery, which you've seen me do before. I've got Neon Animated Pages selected right here in the DevTools. And I've got my console open. So I can just hit $0. And that will actually allow me to grab a reference to the Neon Animated Pages element. And I can just set selected to a hard coded value. So I'll just switch it to 1. And you'll see what happens. The page changes. I switch it back to 0. The page goes back. Set it to 1. Page changes. Back to 0. Page goes back. Now we've got this really cool relationship between these animations. You can see how they play off of one another, which looks really nice on perhaps a mobile device of some kind. It is a little bit of a bummer, though, to have to manually change the selected value in this way. So let's fix that. What we're going to do is we're going to have our elements dispatch events. When we hear those events, we'll tell the Animated Pages element to update. So we can actually pop inside of the template there. And I'm going to take the Settings button and just give it an on tap handler and a method called Show Settings. And then to implement that, I'm just going to fire an event called Show Settings. I'll do the exact same thing on the Settings page. I'll find its Cancel button, another on tap handler. This time, we'll say Show List. And we'll do another event, Dispatcher, basically. So we're just going to fire off another event called Show List. And then back in our Index page, this is going to be a little quick and dirty. But what I'm going to do is I'll just listen at the document level for those events. So normally, you would probably have this Neon Animated Pages and these elements. You'd probably have this inside of maybe a bigger element of some kind. So you could use on-listeners to listen to these things. You'd be like, oh, yeah, I want to listen to on-show settings. And when I hear that, that's when I will update my selected property. In this case, we're just doing a quick little demo here. So we'll just listen right on the document. With that in place, I think we're actually good. We can switch back to Chrome. And now when we click our little button up there, it's going to fire the event, which is going to trigger the change in animated pages. And we'll click that cancel button and likewise. Now if you want all of your pages to use the same transitions, it would be really inconvenient to have to copy and paste that code over and over and over again. But thankfully, we can work around that using a feature that's built into the element itself. OK, for our second demo, I've got this very simple transition thing. Each one of these is a page. Each one of these big colored blocks is actually a page. And as I'm clicking, you can see I'll use the exact same transition animation. So looking at our code, it looks just like our old example. We've got a neon animated pages element here. We're using some layout classes. We're flexing it. We've got a selected binding right there. And then I've got this little handler that I've added just for demo purposes called ONTAP, where I've got this next method. And I'm just looping through possible selected values. So we're incrementing up until we reach the max and then we're looping around again. Now, I've got the same element in each of these slots. And I know that I'm going to want all of these to use the same transition. Even if I didn't have the same element here, maybe I would want all of them to use the same transition. So instead of having to go into each and every one and copy and paste that behavior over and over again, what I'm going to do is just take advantage of this convenience feature that Animated Pages offers, where I can go up to the top and I can just import the animations that I want it to use, as if we were building an animatable element. But I'll just pull in a scale up animation and a fade out animation. And then we're just going to tell Animated Pages, hey, for all of your entry animations, just play the scale up animation for all of these. It doesn't matter what it is, just play that. And for all the exit animations, just play the fade out animation. So if you know you want all of your pages to use the exact same intro and exit animations, this is some shorthand that you can do that will save you quite a lot of typing if you have a bunch of different elements that all basically need the same transitions. So with this in place, we're actually pretty good to go. We can switch back to the browser and click on the thing. And we're going to get that exact same behavior and it saved us quite a lot of typing. Now, the last thing that I want to touch on is something that I promised at the beginning in the video, this idea of being able to take elements and transition them from one page to the next, right? Actually pulling along what Neon Animated Pages refers to as shared elements. So let me show you an example of doing that. I've got a very simple app here and it's got this sort of large sign in button of sorts. And when I go click on that sign in button, you'll see that it's going to transition and become the header of my next page. So let's do that again, right? So I've actually taken that element and sort of morphed it into an element on another page and sort of carried it from page one to page two. So again, this is a shared element transition and in particular this one is called a hero transition or hero animation. So implementing this is actually pretty easy though the effects themselves look very sophisticated. They're pretty easy to implement once you know how. So in my index page, again just like the previous examples, I've got Neon Animated Pages, right? I'm flexing it. It's got the selected binding there. We're using a little cheating next handler to advance the page. And I've got two elements inside of here. One is called main page though maybe I should have called that sign in page but main page and detail page which is going to be the page of the header. So this is our main page and I want you to notice that we've got this div with an ID of circle here. So this is really, really important. We're going to come back to this later but just know that it exists inside of this page. Before we do anything, I'm going to go up and check out our imports. So instead of the Neon Animatable Behavior, I've actually got this thing which is very similar though an even longer name called Neon Shared Element Animatable Behavior. So this actually implements all the same stuff as the Neon Animatable Behavior but it gives us this magical shared element extra awesome sauce which we will use in just a second. And then I've got two animations that I pulled in here, hero animation and fade out animation. So let's implement both of those right now. So we'll go down and just like we've done in previous examples, we will add the behavior to our element. So this time we're going to add the Neon Shared Element Animatable Behavior. We will create a properties object and in that properties object, we will drop in an animation config object. We'll have entry and exit animations. The entry animation doesn't really matter because we're not going to play it in this example but I'll just throw one in there. The exit animation though, pay attention here, I'm actually creating an array of animations. So animations that we'll be playing simultaneously. The first one is going to be that hero animation and we're going to give it an ID property and we're going to say that we want to hero animate a thing with the ID of hero and this does not refer to a CSS ID which confused me at first. So this is not a CSS ID. This is an ID that we are going to define in JavaScript. So kind of keep that in mind for the moment. And then we're going to say that this page right here is the from page. We're meaning that this hero element that we're going to refer to is coming from this page and it's going to another page which we will demonstrate when we implement the next element. And then we're going to implement a second animation which is just going to be fade out and we're going to basically say everything else on this page should fade out when we're exiting. So let's go define this hero ID thing. The way we're going to do that is through this shared elements object. So remember I've got this circle up here, right? This thing with ID of circle. That's really what I want to hero transition. So I'm going to add this shared elements object and I'm going to tell it, you know, and by the way it looks a lot like our animation config object. It's a value that returns a function, turning an object. What we're going to say that when we say hero, what we're actually talking about is this dot dollar sign circle. And the reason why we do this is because this term is going to be used in both elements, the from page and the to page. So it's a shared term referring to different things on different pages. So here hero refers to that circle. Let's go implement the next page, the detail page. And you'll see that we've got the same imports pretty much. We've got a shared element, hero animation, fade out animation, fade in. We're going to also implement our behavior. We're going to drop in an animation config object. And for the exit animation, it doesn't really matter because we're not going to play one, but I'll just add an exit animation. But here we are again with the entry animation. Again, it's an array of animations. And note that we're using the hero animation. The ID that we're referring to is still hero. But now we're saying that this is the to page. So the first element was the from page. This is the to page, where hero is going to. And then for the rest of the content on the page, we're just going to fade it in when we're doing entry. And then we're going to go define its shared elements object. And what we're going to say here is that when we say hero in this element, we're referring to our element with the ID of header. So hero in the other one refers to circle. Hero over here refers to our header. And it is up to neon animated pages now. And it is up to that hero animation behavior to interpolate between A and A and B to get us from there to here. So let's go and give that a shot. We will go back to our browser and click on our circle. And you see we get that nice transition over to our header. Now this is a pretty simple implementation of this pattern, though it is a really cool effect. But what I'd like to show you is if you go over to the elements catalog at elements.polymerproject.org and you click on this neon animation button down here, there is this really awesome guide full of really helpful stuff on neon animations. But at the bottom, there are all of these really great demos. And one in particular, which I sort of based this on, is this one called like squares to circles or circles to squares, I think. And it is a much more advanced implementation of what I just showed you, where all of these circles are actually dynamic hero transitions, which is really cool. But it involves a fair bit more code. So once you feel like you understand the original hero animation, go check this one out. Go try it out and see how you do. But now you know everything that you need to start creating some really, really sick animations in your Polymer apps. So the next time you want to add a really fancy animation to your application, you can just say, hey, there's an element for that. Now if you've enjoyed this video, be sure to go down and click that little subscribe button. That's actually how we get to keep making these. And if you have questions, you can leave them for me down in the comments or hit me up on a social network of your choosing at hashtag ask polymer. As always, thank you so much for watching and I'll see you next time.