4.7 Nested Animations
As you create your transitions from slide three to slide four, you're going to create an animation with an animation. As the slide itself fades in, you're also going to animate the movement of the text within the slide.
1.Introduction2 lessons, 06:47
2.Easy Parallax Scrolling With Parallax.js6 lessons, 52:23
3.Scroll Events With Wow.js4 lessons, 34:15
4.Scrolling With Skrollr8 lessons, 1:09:54
5.Bonus Content: Creating Scrollable Navigation5 lessons, 42:49
6.Conclusion1 lesson, 01:39
4.7 Nested Animations
Hello and welcome back to Scroll Events Made Easy. Once we get to our third or the end of our third slide animation were we’ve narrowed the margins and faded our text on, we're going to move from slide 3 to slide 4. But this time we're gonna do it a little different because we're gonna keep slide 4 right in the middle of the stage to the whole time, we're just going to make it invisible. And in order to achieve the effect we're going for, we're gonna need to do an animation inside an animation. So, we're going to animate the slide itself as well as the slide content or text inside it and both of those animations will be separate. But first let's get started by styling our fourth slide because we do need to show a little love to it. So we're gonna go to brackets. And in our main.css file and actually let me point out first that we're now in the slide 15 folder, so all the changes in this lesson will be saved there. And for our slide class, we've created everything we needed to give it a full width and full height, and fix it in place. But for the fourth slide, we also need a background image. So after our last CSS rule here, we're gonna create another rule for the slide 04 ID. This is an ID, not a class, so we're using the pound sign there. And then for slide 4, we're gonna give it a background. And I'm gonna set a url for this. I'm gonna point to the img folder forward slash, I believe it's called stars.gif. So we'll point to stars.gif and then I want to position that in the top left. And then for the background size we're just gonna set it to not contain, we're gonna set it to cover. And that should take care of that. Let's go ahead and save that. We also need to jump into our HTML file. Go down to slide 4 and uncomment it. We'll go ahead and leave the shuttle commented out for now, we'll uncomment that later. But, let's take a look, let's save our HTML file, jump back into our browser and refresh. And we can see that text there the whole time but we don't see the background image. And, I might have gotten the path wrong on that, let's go back to our CSS file. And, yeah, this main.css file is in a folder, so we need to navigate outside of that folder first, ../. There we go, now we are even getting the code hints there. So let's save that, jump back in, onto our page, excuse me. Scroll back up to the top and refresh. And now we see our background image. Problem is, all of our other items are now invisible even as we scroll up and down. So now what we wanna do is make this invisible, until we get to the point where we wanna start animating it in. So let's go back to our HTML, and our last animation stopped at a value of 2000. So that's where we're gonna start here. So for this slide, we're gonna create another data attribute for data-2000 and we're gonna set its opacity here to 0. And then at data-3000, we're gonna set the opacity to 1. So again, we've created a new value here that's larger than any other value we've used before, so that will shorten our scrollbar and give us more room to scroll up and down. Now let's see if that works. Let's save our html file, refresh our page, and now let's scroll down. It's still invisible. And then hopefully, from this point down, we'll see that fade in. And we do. So that fade in is nice but the text itself is kind of boring. Cuz it's just kind of sitting there as everything fades in. So this is where we're gonna do an animation within an animation. And what we're gonna do if we jump back into brackets is we're just going to move it up slightly. We're gonna move it down for its starting point and it's going to animate upwards as everything fades in. So we don't need to create a fade in for this inner div because the outer div has already taken care of that fade in. All we need to do for the inner div is the motion of the text. So I'm gonna create another data-2000 attribute here for the text itself, and here we're gonna set the top position to a value of, let's try about 200 pixels, and we'll animate it up to a value of zero. So we'll do that at data-3000, we'll set the top value to 0px or you could just set it to 0. And let's see if that works. So we'll save that and scroll back up to the top and refresh, and then we'll scroll down one slide at a time. Everything looks good so far. And that didn't take place, so let's go back and the problem is we've set values here for the top property. But by default the top property's not really gonna do anything unless we set the position attribute or position property of that element in css. So we're gonna go back to these slide content element in our main.css file and all we need to do here is give it a position of relative. Once we do that, then our top position will actually do something. And let me prove that to you before we go in and watch the animation. Let's take these data attributes out. I'm just gonna highlight those and comment them out for now, and since we commented out that closing angle bracket there we'll need to add one up here. I've commented that out there's no longer an attempted animation there anymore, and in our main.css, if we take out position relative, and let's just give it a top position of 200 pixels. So we'll save that, go back to our page and refresh, and you'll see that setting that top position didn't do anything for us. But, if we go back into our CSS and in addition to setting our top position, we'll also actually create a position element or a position property and set its value to relative. When we save it now and refresh the page, we can see that does move the text down. So again we cannot animate the top property if the position is not already set. So let's delete that top property, we'll leave position relative there and save our css file. We'll jump back into our html file. I'll get rid of this closing angle bracket here. And then I'll grab all of this and uncomment it. And I just re-commented it. Let's just do this the old fashioned way, with a backspace key [SOUND]. There we go. So now let's save our file again, jump back into our browser scroll up to the top and refresh. So now we go from slide 1 to slide 2, everything is fine, 2 to 3 is fine and now we see as we go from 3 to 4 that as everything fades in, our text is also moving up. And that looks really nice. So the last thing we have to do with this page is animate the shuttle. And we'll get to that in the next lesson. Thank you for watching, and I'll see you then.