FREELessons: 15Length: 1.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.3 Animated Page Transitions

Now that your CSS animations are in place, it’s time to activate them. In this lesson, you will learn how to trigger your animations when the user clicks on a menu link.

4.3 Animated Page Transitions

Now that we've got our animations occurring, we need to adjust this, so that our animations occur when we want them to occur. Obviously, we don't want them to occur when the page first loads. We wanna wait until we click on another page, then we'll animate out what's there, load the new content, and then animate that new content back on. So let's jump into our code, and you'll notice we're now working in the SITE09 folder, so all the changes I make in this lesson will be saved there. And I'm gonna jump over to our main.js file, and our pageChange function. So when we click on a transition link, we're triggering that pageChange function. And in that pageChange function we are doing some things with the navUnderline, which we're done with that. We don't have to worry about that anymore. And then, we're loading this new content into our container. Well, at some point in here, we also need to add the class of animating to our body. And so let's do that before we load the new content, that makes sense, right? So inside our pageChange function, just before we load all of this new content into our container, I'm going to point to the body, and we're going to do a .addClass, and we're gonna add the animating class to our body. So then we can come up here to the top and get rid of this line here, where we're adding that class when the page first loads. So now we're not adding the class of animating until we run this pageChange function. And then after we add that class, we're gonna load the new content. So let's see how far this gets us, this isn't fully gonna work yet, but let's go ahead and see what's happening. We'll jump into our page and refresh it. And now, let's refresh it again. Sometimes it takes a couple of times. There we go, okay. So our animation is no longer happening when the page first loads. And hopefully, now when we click on Join, we'll see that animation. And we do, but you'll notice something happened other than the fact that the new content is not animating on. Something else happened. I'm gonna refresh the page, and take a look at the content down here at the bottom. That's where I really saw the issue. When we click on Join, you'll see that, that content just disappears. And also, if you were paying attention, let's refresh again. If you were paying attention to the background here when we click on Join, you'll see that that content immediately changes. And that's why the content at the bottom was immediately disappearing, because it was automatically pulling in the new content before animation was even finished. So we need to make sure we wait for that animation to finish before we load this new content. So what we're gonna do is we're gonna take all of this here where we're creating this new container and loading this new content into that container. We're gonna pull all of this out of the pageChange function, and put it in another function. So that we can delay the start of that new function until all of our animations have occurred. So I'm going to cut that code, everything after body addClass animating. And then after our pageChange function, I'm gonna create a new function and I'm gonna call this loadNewPage. And then, we're gonna need to pass into it that same new URL that we passed into the pageChange function. So we'll create this new function there, we'll paste all of the content that we just cut from the original function. And then back in our pageChange function, let's wait a given amount of time before we load this new page. Well, how long do we wait? Well, in order to determine that we need to go back to our CSS to see how long our animations are taking. If we scroll down a little bit, we can find, this navUnderline is not what we're looking at, I'm looking for the hero images, here we go. So our transition here is taking half a second, 0.5s means 0.5 seconds. And if we scroll down a little further, we can see our card animations are also taking 0.5 seconds. So all of our animations are lasting half of a second. But remember, we do have some delays on some of those transitions. In other words, we have some delays before some of those transitions start animating. And the largest delay we have is 0.9 seconds, which is almost a full second. So if we add that 0.9 second delay to the length of the animation, which is 0.5 seconds, and that give us 1.4 seconds. So maybe if we wait one and a half seconds, that will give us enough time for everything to animate off before we animate the new stuff on. So we're gonna create a delay of 1.5 seconds before we run this new loadNewPage function that we just created. So after we add the class of animating to the body, which triggers the animation, we're gonna use JavaScript to create a setTimeout. And we'll put a function inside that setTimeout, and so basically, what happens here, after our function, we're gonna put comma space. And we're gonna enter in the length of the delay which is gonna be in milliseconds. So I'm gonna type 1,500, because 1,000 milliseconds is equal to second. So 1,500 milliseconds is 1.5 seconds. So the way the setTimeout function works is that the function we put inside this setTimeout method is going to run after this delay. So after a 1.5 second delay, we're going to run the loadNewPage method. And we need to make sure we pass into it the newURL that was passed into this method. So this is doing exactly what it did before, except it's waiting 1.5 seconds to do it. So let's save that, let's go back to our page. And let's refresh our index.html file. And hopefully, now we'll get to see the entire animation, and we won't see our background here change before that animation is complete. So we'll click on Join, and sure enough we got to see that entire animation in action. So the next thing we need to do inside this loadNewPage function is we need to remove that class of animating from the body once all of that content has finished loading. So inside this function for our container.load, we need to create a new line here that takes our body and removes the class. So removeClass of animating from the body. And so again, that's gonna happen after everything has been loaded into this container. And hopefully, when we remove that class, we should see the Join pages animation in reverse. So let's save that, jump back over to our page and refresh, and we click on Join. We see the first page animate off. And then we see the second page animate on. But there's a little bit of a hiccup there. If we refresh it and do it again. If we click on Join, take a look at our bottom row down here. So our first animate's off, and then when our second page animates on, the hero section animated on just fine. It expanded out just like it should, but the three columns at the bottom kind of just appeared. They didn't animate on like we expected them to. Well, one way that I've found to overcome this is we're gonna wait, basically, one one thousandth of a second, before we remove that animating class. And by setting that one millisecond delay, that actually gives this time to trigger properly and we'll just see that in action here. So we're gonna do another setTimeout here. And we'll put a function inside that. And this is gonna again, it's just gonna be one millisecond. So after the function, we're gonna type, 1 and then we're gonna take this removeClass. And I'm just gonna move it up inside that set timeout function. And let's see if that does the trick. So we're gonna jump back into our page and refresh. And we'll click on Join, and keep an eye on the bottom row, and now we see the delay happening properly on our three columns at the bottom. All of the animations are occurring exactly like we would expect them. We click back on home, we see that animate off, and the homepage animate on. And again, we see a little bit of a problem there. But as we go through and make some more changes, we'll see that some of these problems will get cleaned up. So we click on Join again, and for now, that particular animation seems fine, and our bottom row animated in just fine again there at the end. So that's how we can trigger these animations when we want them to happen, instead of just causing them all to happen when the page first loads. So thank you for watching, and we'll continue in the next lesson.

Back to the top