What do you want to learn? Leverged jhuang@tampa.cgsinc.com Skip to main content Pluralsight uses cookies.Learn more about your privacy Enhancing Web UIs with Parallax Scrolling by Anthony Harris Scrolling effects on the Web are a great way to engage your audience. This course will take you through a variety of parallax scrolling techniques from basic to advanced. Start CourseBookmarkAdd to Channel Table of contents Description Transcript Exercise files Discussion Learning Check Recommended Course Overview Course Overview Hi everyone. My name is Anthony Harris. Welcome to my course, Enhancing Web UIs with Parallax Scrolling. I am a lead designer at SoCreate. One of the biggest challenges that web designers face is engaging their audience. This course is overview of the current techniques available for parallax scrolling, starting simple and moving into more complex examples. Some of the basic topics we will cover include pure CSS scrolling effects, introducing JavaScript, and using the GSAP JavaScript library. By the end of this course, you'll have a solid foundation for styling scrolling on your website or application. From here, you can let your creativity go wild, exploring these techniques even further. I hope you'll join me on this journey with the Parallax Scrolling, Enhancing Web UIs course, at Pluralsight. The Origins of Styling Scroll The Origins of Scrolling and the Upcoming Course Content Hello. My name is Anthony Harris, and welcome to my Pluralsight course, Enhancing Web UIs with Parallax Scrolling. This course is meant to give you an overview of different scrolling techniques that are available for you to use, starting with the most simple, and getting more advanced as we go. And so as with learning anything new, it's always good to get a brief history lesson. So the origin of scrolling effects came from 1920s cartoons, and it was most commonly used when characters were shown on the screen walking. The effect is very useful at creating depth and become widely used after it was first introduced. So fast-forward about 60 years, and you have 1980s side-scroll video games. These games used the same parallax background effect, but also introduced trigger elements that the character reaches, and then the user gets to experience what happens. And when done correctly, that combo can be very engaging. So fast-forward about 30 years, and here's why you are here, scrolling effects on the web. Web designers began experimenting with parallax scrolling around 2011. And I'm sure there was a little bit before then, but 2011 is when a lot of articles started getting written about it, and it was gaining a lot more attention and kind of trending as you'd say. So early designs were very simple, usually just dealing with two layers. One of those layers would be the base scrolling rate, and then another layer would be a different rate, either faster or slower. So fast-forward to now, with our recent CSS and JavaScript advances, there are really no limitations for web designers when it comes to scrolling. What we're going to learn in this course can best be broken up into four separate techniques. The simple CSS technique deals with fixed images. The advanced CSS technique deals with creating multiple parallax layers. In the simple JavaScript technique, we'll look at adding CSS classes to the page as the user scrolls a certain distance down from the top of the viewport. And then lastly, the advanced JavaScript technique looks at using the GSAP JavaScript library to create all kinds of special effects. And overall, this course is really meant to get you excited about designing on the web and what kind of cool stuff we're going to be able to do going forward. So I hope that you will join me, and learn about some cool new ways that you can engage the users of your website. And in the next module, we're going to look at what we can achieve using simple CSS. Simple CSS Techniques Position Fixed Method We're going to start with the basics here, and we're going to look at two very simple CSS-only ways to create scrolling effects. The benefits for using these methods are lightweight and good performance, meaning that it's easy for the browser to process them, does not require any additional files, so there are no linked JavaScript files, and only uses CSS, so you don't have to worry about this method changing in the future. And what I mean by that is when you use a plugin or some sort of library to help you do a certain effect, there's always the chance that it could stop being maintained or could have some changes that break the effects that you are making. But CSS is managed by the W3C, the World Wide Web Consortium, which is an international committee of full-time staff members that work to develop web standards. So we're going to look at two different methods here, and the first one uses position: fixed on a singular banner image on the home page of our site, and the second method uses background-attachment: fixed on the Projects page of our site with multiple images. So let's jump in and look at the first demo, and that's for the home page banner, which is going to be fixed to our viewport. Now below that, we're going to have the page content, which has a background color, and will scroll up over the banner. Now this creates three z-index stacking layers when the page content scrolls out of the viewport. Here is our website for a landscaping company, and it's got a nice big banner image, and you can see the page content scroll up over the banner, and then back down to reveal the banner again. So we actually have two items here that are position fixed, which you may have just noticed when the scroll happened, and they are the navigation and the banner. Here you can see the styles for the banner and the page-content in the order in which they appear on the site, and in the banner styles, the important stuff to note is position: fixed, and left: 0, right: 0, and top: 0, which is essentially securing the banner to those sides of the viewport. Another important thing to note is the page-content gets a margin-top value, and that is pushing the page content and its background color down from the top, revealing the banner. If I were to remove this margin-top value, and then we look at what's going on in the browser, you'll see that the page content is all the way up at the top. So, this value is needed because when we make the banner position: fixed, it takes it out of the flow of the page, and so we need to account for that with the margin-top value so that we can still see it. To expand a little more on that three z-index stacking layer concept, if we were to change position: fixed to position: absolute on the banner, and then we come over to the browser and check out what that gives us, you'll see that the entire page scrolls underneath the navigation in a normal manner. But then when we set the positioning back to fixed, and we come over to the website, we see that the banner is the first layer, the page content is the second layer on top of that, and finally the navigation is above them all. Alright, so let's move on to the next method, which uses background-attachment: fixed. Background Attachment Fixed Method For our second demo, we're going to look at an effect you can do with background images. Okay, so let's check out the second demo, which is a very similar concept to the first, but a little bit different. This concept is centered around background-attachment: fixed, and what this is going to do is let us leave our element in the flow of the page, but still display a background image that is fixed. So, what's going to happen is the element is going to act like a window, revealing the background image as it scrolls through the viewport. This method is going to let us do some really cool things with multiple images acting fixed during scrolling. Here is the Projects page, and we're going to look at some before and after images. And the effect is going to show the before image scrolling up and revealing the remodeled landscape. This has a very captivating look where the new replaces the old. Here is the styling for the images on this page, and the first thing that you can see is all of the background images being set. And then right below that, we have the shared styling, which is applied to every background image. The main declaration that we want to highlight here is background-attachment: fixed. This is what's allowing the element to stay in the flow of the page and scroll in and out while its background image appears fixed. Jumping back to the browser, you can see this effect is a really cool way to showcase something like a before and after. Let's look at one more example of this effect, and it includes full-width images that break up the page content. So we're looking at a Testimonials page here, and the idea is that each testimonial follows a banner image of that project. And as you can see, this simple effect makes scrolling the page much more interesting. And if we look at these styles, we'll see the exact same thing as the previous example with the background image being set above and then the global styles below with background-attachment: fixed working its magic. Coming up next, we have some major coolness. We're going to look at making elements scroll at different rates, using only CSS. Advanced CSS Only Technique The Basics of Making Elements Scroll at Different Rates Now we're going to look at the Advanced CSS Technique, so it's a little more complicated, a little more to wrap your head around, but really cool results when you get it implemented. Before we dive into this effect, what will happen? What are we going to create here? Well, we're going to make elements be able to scroll either faster or slower than the base scrolling rate. So just to peak your interest about this technique, here's the final product that we're going to create, and you can see the different layers scrolling at different rates. When we consider the benefits for using this method, we're going to basically see the same thing as the simple CSS techniques. So to quickly summarize those, we have lightweight, easy for the browser to process it, no additional files needed, and no worries about the method changing. However, with this method, there's one thing that could kind of be considered a drawback, and it's not really a drawback, but it's important to know about. And so what it is, is to do this method, you need to put overflow: hidden on the html tag. That is crucial for this method to work correctly. So the reason why this is needed is it gets rid of a duplicate scrollbar that otherwise would be put on the element that we're going to refer to in this method as our parallax container. Now there's a pretty good chance that having overflow set to hidden on your html tag really isn't going to be an issue for you at all, and it isn't going to mess up anything on your website. But it's definitely worth bringing up, because it could cause some of your layout styling to get affected, and it also might affect some other scrolling effects that you're trying to do on the page. And like I said, it's just important to be aware of this, because you may implement this technique and it works great, and then later on down the road, you're making some other changes to your website, and you can't figure out why you're getting the behavior that you're getting, and it might be due to this overflow set to hidden. So let's familiarize ourselves with the basic HTML markup that we're going to need to execute this. We have this outer div here that gets the class of parallax, and this is what I'm going to refer to as the parallax container. This is our parent element, and it wraps all of our parallax layer elements, and as you can see, with the text that's inside of these parallax layer elements, the top one is going to scroll at the base rate, and the lower one we're going to make scroll slower. Let's look at the styles that we're going to put on the parallax and parallax__layer elements that are going to give it these magical scrolling abilities. So the first thing that we're doing at the top is we're setting the perspective and we're setting the height to 100 viewport units. If you're not familiar with viewport units, 100 vh is essentially the same thing as saying 100% the height of the viewport. This is a fairly new unit of measurement within CSS, and you have the ability to look at the viewport height or the viewport width. The next essential styles that we're applying are these overflow declarations. Now, overflow-y set to auto is going to allow the content inside our parent element to scroll the normal way, but descendent elements will be rendered relative to the fixed perspective that we've established. This is the key to getting this effect to work. Next we have the styles that are going to go on every parallax layer element, which are position: absolute, and then top, right, bottom, left: 0. The reason why position: absolute is needed here, when we think about it conceptually, is position: absolute takes our element out of the flow of the page where all of the base-level scrolling is happening, so if we want our element to scroll either faster or slower, obviously it can't be in the flow of the page, it needs position: absolute. The last step that's needed to get this effect working is for us to translate our child elements on the z-axis. So our base layer is getting translateZ(0), so we're keeping it scrolling at the default rate. Then we have our back parallax layer, and it's getting translate(-1px), so it's moving back into space away from the viewer. So here we are in the browser, and we're seeing these two elements, in fact, scroll at different rates. So right here we've got two parallax layers that are both using the same parallax container for their scrolling, and an important thing to notice here is right when they hit the middle of the screen, they do line up. So to gain a better idea of what's actually happening here, let's think about this conceptually. So here we have a very classic perspective example, and if we think about the orange box in the foreground as our parallax container, and the orange box in the background as one of our parallax layers, you can see how from our vantage point, the parallax layer appears to get smaller as it travels back into space. So the parallax container is like a window, and here the blue area represents what you're able to see around the parallax layer. So keep that blue area in mind, and we're going to switch to a 2-dimensional view. So here is what is would actually look like on a screen. We have the outer parallax container, the inner parallax layer back in space, and the blue representing what we can see outside the parallax layer. When we get rid of the blue, and we add some text to the bottom of these containers, it also helps illustrate this example. And a very important thing to note is that both of these pieces of text, the back text and the base text, are the same font size. The back text is just moved into space, making it appear smaller. If we were to position both of these pieces of text slightly below their containers, you can see that the back text would still be visible, but the base text would be out of view. I'm showing this text here with just reduced opacity, so you can still get an idea of its location, but it is out of view. So that's pretty much it. These two pieces of text are going to scroll through their respective containers, and the end result is going to appear like they scroll at a different rate. Coming up next, we're going to use this method to create a landscape scene with different layers that are going to create the illusion of depth as you scroll. Creating a Landscape Scene with the Illusion of Depth Time for us to make something cool, and so we're going to take the concept that we just learned and apply it. In this advanced CSS demo, we're going to create a landscape with five different layers on five separate elements, since we'll need them to be on separate elements to have them all scroll at different rates. And we're going to aim to have them all organically meet up right as they go underneath the nav. So here is our About page for the website, and it looks kind of cool, but the really neat part is going to happen as soon as the user starts to scroll. So the dark brown foreground scrolls at the base scrolling rate, and every layer going back scrolls incrementally slower. And what it does is it creates an atmospheric perspective. If we open the developer tools, we can see that we have this little group of five divs, and we can turn the background layers on and off individually. An important thing to note is that I'm using background images in this example, but in each one of those five divs, you could put an image tag or inline SVG, or any content, and this example is going to work fine, which is a contrast to the previous module where we specifically used background-attachment: fixed, making it so we could only do that effect with a background image. Here are the unique styles for those five divs, and the first thing that you're going to see is the translateZ values. These values reduce down as you travel through the five elements, moving them further and further back into space. So the next transform is the scale, and this is an important thing to mention with this concept, because in my example, I needed all of my divs to be the full width, so as I'm sending them back into space, I'm also increasing their scale. And lastly, each one of these images has its own background image, of course, and then the different top values are needed, because I was trying to have them all line up right when they went under the nav. Let's scroll up here and look at what styles we have on our parallax container and then the global styles going onto every parallax layer. But before we discuss those, first and foremost, we need overflow: hidden on the html tag for this to work. So in this case, I've added an ID of about-html to my html tag because I actually don't want overflow: hidden on the other pages of this website. So next up, we have the parallax class, which has all of the styles that need to be on our parallax container, and then we have the parallax__layer, which has got some global background values, and then it also has the positioning, and you'll notice that the top positioning is left off because it's different on each one of the parallax layers below. So this is a really cool effect with a lot of possibilities, and it's really fun to play around with. And the best part, CSS only, so all the benefits of keeping it simple. However, sometimes it's good to move beyond simplicity, and that's exactly what we're going to do next as we leave the world of pure CSS, and we see what captivating events we can create with the help of JavaScript. Simple JavaScript Technique Intro to JavaScript and How It Relates to Scrolling Now we're going to look at a simple JavaScript technique for making a scrolling effect, and introducing JavaScript is going to give us a lot of new abilities. Previously, we've been using CSS to style static HTML markup. Now, we're going to throw the dynamic JavaScript into the mix, and see what we can achieve. What will happen in this example is we will create styling changes using classes added to the markup from the JavaScript as the page scrolls. A great phrase to remember when working on the web is, with great power comes great responsibility, and I think that's very true here because you really don't want a lot of big, jarring layout changes or something as the page scrolls. I think this technique works really well when it's done subtle. Here's the final product. We have some little trees that pop up as the page scrolls, and what it is exactly is every 15 pixels a set of 3 trees makes themselves visible. And then you can see that when you scroll back up to the top, they go away in the same fashion. The benefits for using this method are new possibilities for effects beyond what only CSS can achieve. So we're no longer tied to just static markup. Now we have JavaScript to alter the page. Another benefit is that JavaScript is executed on the client side, which means that it works completely on the user's processor instead of on the web server. So, that means that you may incur a minute addition to your load time, but when these effects are firing off, it should be seamless to the user. And let's look at the drawbacks for using this method. First of all, JavaScript can bloat your website, though I have to say that really nothing that we're going to do in here is going to be excessive bloat of JavaScript. Another thing to realize is that having a lot of JavaScript that's inline, and not very well organized, can affect your search results. So just like with CSS, we really want to put that code into small, manageable chunks and then store them in their own files. And lastly, it is a possible security risk since it executes on the client and can be used for viruses to exploit the user's system, but we'll just hope that our users are doing software updates, and it's all good. With JavaScript, there are essentially two main ways to serve up the code. So the preferred way, as I just mentioned, is to take that code and put it into a separate file, and then load that file using the src attribute on your opening script tag. In this file here, you can see line 12 is an example of loading JavaScript. The other way to include JavaScript is just to put the code straight inside the opening and closing script tag in the page. This is what's referred to as inline code, and you really don't want to have a lot of this in your project. Next we will examine how to create the animations shown in the demo, and those were the little trees popping up as the page scrolled. Creating Landscape Elements That Appear as the Page Scrolls Okay, now it's time for us to jump into the code for our simple JavaScript demo. So the main points of this demo to note are we have that house that's fixed and gains the landscaping elements as the user scrolls, and those landscaping elements are going to be told when to become visible by CSS classes that get added to the page markup. So the elements are going to use those classes to trigger some animations that are going to essentially create the effect that looks like they are growing out of the ground. So here's the demo once more, and you can see that when you scroll slower, the trees pop up slower. It's not just triggering an animation that makes them pop up at a certain rate every time you scroll no matter how fast. If we observe this again with the developer tools open, you can see how these classes are dynamically changing in the markup as the page scrolls. And this is the JavaScript code, which adds those classes, so let's take a look at what's going on here. The first statement that we have is creating two key value pairs, one for suffix, and one for threshold. The suffix is just the number value that gets appended to the end of each of these classes so we can have as many classes firing off as we want, and then the thresholds are the different distances down from the top of the window that we want these classes to change. So below that, we have our suffix and threshold pairs. Now, we've said that in a pair, the suffix comes first, and then the threshold. So here is where we have an array of all those values. So suffix and threshold pairs is our variable, and down here on line 24, we're using those pairs to apply the function, which adds and removes the classes. So for this main function that does all the work, what we're saying essentially is begin listening as soon as the page scrolls, and then we have the if statement, which is changing our classes as we scroll down, and the else reverses them back when you scroll up. Here's our markup in the editor, and you can see the plants element, and it has all of the Noscroll classes on it, and then inside, we have a bunch of empty spans, which we're going to use to style the landscape elements. And here's what we're doing with that HTML in the styling. So this section at the top is our global styles that are getting put on every plant element, and then it's before pseudo element. And an important thing to note here is overflow's set to hidden on the span, and that's so that we can translate its before pseudo element outside its boundaries and make it not visible. So that's the default positioning for all the before elements when the page initially loads, and then as the page scrolls, and all of those classes are changing to plantScroll, plantScroll2, plantScroll3, etc., we are going to translate the before element up into view. And then here's a quick look at the unique styles on the plant elements. So for convenience sake, I made it so that each of the groups of three plants all gets the same image, and then each of these plants is getting a unique location to kind of just make it look a little bit more random. So when we look at the page with all of the landscape elements exposed, and mouse over all of the spans in the developer tool, we can see all of their unique locations. And if we open one, here is the before element that we're using to actually style the image. So that's pretty much it, and with a little extra HTML and CSS in your page, plus the JavaScript code, you've got another really fun effect to play around with. There's definitely a lot of possibilities for this effect when you consider having different threshold values and how many or less elements you want to have animating, but always remember, with great power comes great responsibility. And that perfectly leads me into coming up next, we're going to take it to the next level using GSAP, and this is really like taking it up 100 levels because truly anything is possible using the GSAP JavaScript library. Using GSAP for Scrolling Intro to Using the GSAP JavaScript Library Here we are at the last demo module for this course, and we're going to look at using the GSAP JavaScript library. This is widely considered to be the best way to do advanced scrolling techniques. What will happen in this module is we will discuss using GSAP and how to create basic tweens, and then we will apply the concepts in a demo that is going to have a little magician's top hat that reveals a rabbit. Here is a preview of the final demo. We have this little top hat that's bouncing around a little bit, and it's struck by a magic wand, revealing a little bunny rabbit, and the text Pluralsight Magic in a like a wave effect. And if we scroll a little bit further, we also have another section below with a tween in it, and the ability to have these multiple sections is a very important concept that we'll discuss in a bit. Of course, like all other techniques, there's benefits and drawbacks to using this method. And so the benefits are we have truly endless possibilities for scrolling effects. Anything that you can think of related to scrolling, you can achieve in some way, shape, or form. Another benefit to this method is if you only want to do some of the more simple GSAP effects, you don't have to load the entire library. So there are minified versions that will load a little bit faster if you don't need all of the code for complex things. And another thing that I think is very important is that GSAP is the largest, most popular scrolling library on the web. So this company called GreenSock has been developing it for over 10 years. This is important because it means that there's a user voice, and there's lots of forums and places that you can get information that can help you when you're encountering problems or just trying to learn about how to use it. There are a few drawbacks, or at least things to note. So the first one is that this method is going to add code to your website, what some people would classify as bloat. Another thing to note is that if you are using this on any sort of website that is making you money, at that point, you're going to need to buy a license from GreenSock. GSAP's terms are pretty simple on this. If you're doing a project for one client, you can use it free of charge, no issues. What their business license covers is any project that's going to be sold to multiple end users. So first things first, on the GreenSock website, we have a Download link, and you can choose to download the zip, go to GitHub, or you can load the CDN. I think that normally, in most options, using the CDN is a good way to go, but for this demo, I'm going to be just downloading the code so that it will work offline if needed. So if you were going to use the CDN, you can see at the bottom of this dialog box, there are some options for Robust, Lightweight, or Customize. And if you were going to download the zip, you can kind of pick and choose from what you get from that download in this same way. And the reason why it's like that is because there are really four main sections of this GSAP library. So you have TweenLite and TweenMax, which are used for manipulating the elements, and then you have TimelineLite and TimelineMax, which are used so that you don't have to be applying all of these crazy delay values to your tweens. You can set them up at different points in the timeline. There's still a lot of use for delay within your timeline, but using it makes it so that your effects are somewhat independent of each other. And that way if you need to adjust some of the delays in a certain section, it's not going to throw off other sections. So let's look at some of the characteristics of TweenLite. And as I mentioned earlier, you're going to be incurring some sort of what people would call bloat in this process, but GSAP is really trying to make that as minimal as possible. So TweenLite can handle tweening one or more properties of a single object or multiple objects over time. So in addition to the baseline of TweenLite, you can also add plugins that contain functionality found in TweenMax, and the purpose of that is if you just need one little aspect of TweenMax, they don't want you to have to load the whole thing, they'll let you just have like a little building block on top of TweenLite. And then if you want the full ability of the library, you can use TweenMax, and some of the characteristics of it are TweenMax basically extends TweenLite's features, so you have more advanced abilities like being able to do repeat, repeat with a delay, bounce, yo-yo, other kind of more complex animations. TweenMax includes extra plugins by default. So, TweenLite has 0, you can add plugins to it, and TweenMax includes some by default. Another thing that's worth noting that's very cool is that you can replace TweenLite with TweenMax at any point in your project, and all of your code will continue to work. And lastly, TweenMax includes Timeline Max. So if you are using TweenLite, it doesn't include any timeline- related code, so you need to choose whether you want to load TimelineLite or TimelineMax, but TweenMax includes it in the full ability. Alright, so that's kind of a high-level introduction to using GSAP, and then coming up next, we're going to look at the basics for creating a tween. The Basics of Creating a Common Tween Now we are going to look at the basics of setting up tweens using GSAP. So the tween that we're going to look at and analyze here is TweenMax.to, which is when you want to tween an element to a specific look or location. And then in contrast, you have TweenMax.from, which is kind of the opposite of TweenMax.to. The documentation states that TweenMax.to is by far the most common type of tween that is used, so we're going to look at how to set that up. First, we have the target, which is the DOM object whose properties will be affected by this tween. Next after that, we have the duration, which is set in seconds. And then lastly, we have a place where the styles or altercations to this element are going to be set. So here's what this would look like all filled out. We have a sample CSS class inside of double quotes, followed by a duration set to 2 seconds, and then inside of the squiggly brackets, we have the top value set to 100 pixels. So over 2 seconds, we're going to move the element with that class down 100 pixels. An important thing to note is that if you're doing multiple tweens on the same element, in this case our someCssClass element, you can actually set up a variable that searches the DOM for that class one time, and then you can use that variable in all of these tweens and not incur the extra processing of having to search the DOM multiple times. Let's jump back to the singular example, and you can see that multiple targets have been added here by using square brackets. When you add square brackets, you can do a comma-separated list, and what's really going on is that this is making a JavaScript array of the targets. And then you can also do a comma-separated list in the styles, so when you start to build this out, you can see how you'd want to shift to a more vertical formatting. So this is still a pretty simple example, but there is enough going on to justify the vertical formatting here, and so we have our three CSS classes up at the top, followed by the duration, followed by the styles that will be applied. Something important to note is when adding your CSS, any property that has a dash in it needs to be written in camelCase, so like backgroundColor or marginTop or fontSize, and this is because JavaScript interprets the dash as a minus sign, so you can't use it, and you have to do camelCase on the CSS properties. Another important thing to note is that if you leave off the unit of measurement, it will default to whatever the most common unit is for that CSS role. While you can do this, if you have a value that could be px or em, I would probably recommend leaving it on just for clarity in your code. However, for something like rotation, it only has one value, deg, so I think it's acceptable to leave it off. And when you're doing something like rotation, it's a little bit different than how you do it in CSS because in CSS rotation is set as a value on the transform property, and you can do comma-separated values, but here, they break all of those out, and you set them by themselves, like any other CSS rule. Also, you'll notice here that this last style is just x:600. This is actually translate x 600 pixels, and they shorten it to just x because they try to make these properties as concise as possible. Another thing that goes in here with these styles is your easing. So if you want to put an ease on your tween, you have a lot of different ones to choose from. So here we are setting the ease to Back.easeOut. Let's look at a visual representation of what that means. So this is a really cool way to look at easing. And an ease alters the rate of change during a tween. So this essentially gives the tween a different feel based on how you set it. So you can see that the ease that we have chosen is Back, and then the type is set to eastOut. So when we run this, you can see the type of animation that we're going to get. It's like the object goes a little bit past the destination, and then comes back. So if we switch the type to easeIn, you can see that the object drops a little bit behind the start point before it accelerates to the end point. And if we switch the type to easeInOut, it does that effect at both the start point and end point. So you can see there is a long list of tweens that are possible here, and I really recommend just checking them out, and it'll really get the ball rolling, thinking about different animations that you can create. So we've been looking at TweenMax.to here, and this is what's known as a method. And like I said, their documentation says this is the most widely used method. However, there are lots of other methods. And when you look at the names for all of these popular methods, all one right after the other, you can start to get a sense for the way you can combine some of these and create some really captivating effects. Let's look at some visual examples to see what kind of abilities we have. So pay attention to the start point and trigger that are over here on the right. The start point is in the flow of the page, and when it passes the trigger is when you will see the effect. So here we've added an end point, and what's going to happen is the element will get pinned when it crosses the start point and then unpinned at the end point. And then same thing in reverse on the way back up. Here we've added some rotation to it, so at the moment it gets pinned from the moment that it's unpinned it rotates 360 degrees. Here is an effect, introducing multiple start points and end points. So this object is getting pinned and unpinned three separate times. You can also set an object to traverse a predetermined path composed of Bezier curves. And then when you scroll back up, the animation will play in reverse. (Animation playing) And another really cool effect is to create a sequence of images that play through a start point and an end point to create kind of a classic animation. Coming up next, we're going to look at the JavaScript code used to create the rabbit-in-a-hat effect in the demo that we saw earlier. Examining the Demo Website Animation Created with GSAP So now we're going to take a closer look at the rabbit-in-a-hat animation, which was created using the GSAP JavaScript library. So for this rabbit-in-a-hat demonstration, there's some key things to keep in mind. Firstly, we're going to be using various different tweens to create this animation. And we're going to have those tweens overlap, but it's going to do it in a very calculated way to create unity throughout the animation. And then lastly, we're going to discuss having different sections in the page for tweens and the kind of flexibility that that can give you. So the key elements for this demo are the hat shaking around before anything has started, the wand coming down from out of the screen, the spark elements, and then the hat revealing the rabbit. I've also added this one last tween down here below some content, and that's to help illustrate one of the main benefits for using this method, which is that that could be any amount of content right there, and when you reach that point in the page, the text is going to become visible. So this has a built-in flexibility that the previous JavaScript-only method did not have. So first things first, in the page I am loading TweenMax. Now this needs to be loaded either locally or using their CDN. And again, I'm using the local files here because I want this example to work offline, but for any actual web application, I would recommend just using the CDN, and then you don't have to manage those files locally. So if we move down a little further in the page, we can see the HTML code and the JavaScript, which is going to make up these effects. So inside of this div with the id of intro, each of these elements is used in that animation. And if we scroll down here right below the HTML, you can see that in this JavaScript code, what we're doing is we're creating variables to each of those animations. To start it off, we have nervousHat, which is the hat kind of bouncing around a little bit before you've done any scrolling at all. Abracadabra lowers the wand and triggers the little spark animation. Reveal lifts the hat, showing the rabbit. And then wave causes the text to do that little zip effect where it grows and shrinks. So you can see when we're creating these variables we have a lot of TweenMax.to. In nervousHat, we're using it to move the hat around to these different locations. In the reveal, we're using it to tell all of those objects where to go to show the rabbit. And in the reveal, we're also using TweenMax.from to scale down the h1 text, so that it can grow up to its natural size and remain hidden under the hat when we need it to. Then here in abracadabra, we're using TweenMax.fromTo to move the wand from one unique location to another. And then here in the wave effect, we're using TweenMax.staggerTo to grow the text in that wave fashion, and then right below it to shrink the text in a wave fashion. When we scroll down some more, we can see the area where we're using these variables. So for the nervous hat animation, we have the offset set to -100, so that's going to ensure that the hat is moving as the page loads before the user has done any scroll at all. And then we're telling this animation to run for 300 pixels of scrolling, which is actually just 200 pixels when you take into account the negative offset. So then starting at an offset of 20 pixels, we have the magic wand animation, and over the next 180 pixels, it will move from its start point to its end point, and you'll notice that 20 plus 180 is 200, so we have the hat movement and the magic wand both ending at the same time, and that's when the spark will appear. So the code that creates this sparkle animation is located in a different file. So let's have a look, and get an idea for what's going on. Here's the code that creates the sparkle animation. So in our intro, we have a div with a class of spark point. So that div is the parent that's going to get populated with a bunch of children divs to create all of these little sparks when the animation occurs. And then we're setting some defaults on those child elements. So some stuff to note here is x and y set to 0, so that all of these child elements will start at that spark point origin. And then we have a maxDistance and minDistance that we're going to have a little variation between for each of these sparks. And then when you scroll down, you'll see that we're taking those default specifications for our child elements, and we're assigning as much randomness to them as possible within the specifications that we've set. So we're taking that maxDistance and minDistance value, and we're going to create a unique flight path for each of these child elements, and then we're also using some variation in the duration and delay to create a little bit more randomness. Jumping back over and looking at the code that uses this sparkle animation, you can see that we're setting two things here, and the first one is the amount of child elements that will be created, and the second one is the duration for the overall animation. So this little spark animation runs at the same speed every time, no matter how fast or slow you scroll. That's controlled with this overall duration that's set right here. So if we did something like changed the amount of sparks to 100 and then increased the duration, we're going to get a very different-looking animation. So you can see basically two and a half the amount of sparks and a much longer time they are exploding. Coming up next, we have the reveal effect set to an offset of 260 pixels. So we've got 60 pixels here for the user to scroll where nothing happens while that spark effect is going off. That's kind of built in on purpose. So the reveal effect is running from 260 pixels to 560 pixels, and then you can see at an offset of 450 pixels, we're going to start that wave effect for the text. So the wave effect runs for 200 pixels, and that brings us to a grand total at 650 pixels for our full intro effect. So looking through this sequence of events one more time, we'll close on a very important concept that I touched on earlier, which is that I have more tween down here below a section of page content. If we look back at the HTML, you can see that in between these p tags, I've added a section for this tween. So this is a very simple TweenMax.from tween that's basically just saying over 1 second, bring the element from 0 opacity to full opacity, but the real coolness here comes when you notice that the offset is set to 0. So that's not 0 from the initial top of the page. That's 0 from this section that we're in, meaning that you can add as much content before this section as you want, and that offset value never needs to be adjusted. So this should be like a huge light bulb moment for why this method is so amazing. So we could take this section of code and move it within this page, move it to a different page, and it's always going to behave the same way. It doesn't care what's going on above and below, it's all self-contained. What to take away from this module is that GSAP is incredibly robust, and what you saw here in the demo is only the beginning. So if you're interested in this topic, I definitely recommend you check it out just because it'll give you all kinds of new ideas based on what it can do. Review and Inspiration Review of Techniques and Inspirational Websites Welcome to the last module, where we're going to do a quick review, and look at some inspiration. I think for a course like this, review is especially important because we really looked at four different ways of doing things. And then inspiration is also just as important, because for each of these techniques, we really only scratched the surface. And after we've completed these two things, the next thing I encourage you to do is dive into scrolling. So take the methods that you've learned here, and go wild, experiment, you might get results that you didn't expect, but that's all part of the fun, and this stuff really is fun when you start to get the ball rolling and you start seeing some of the cools stuff that you can make. Our first of four techniques was the simple CSS technique, which styled fixed images in two different ways using just CSS. The first one is the most basic, a single image using position: fixed, and then we looked at the behavior of background-attachment: fixed, which is a slightly more advanced technique, which gives the illusion of images replacing each other. The second of four techniques, called the advanced CSS technique, looked at making parallax layers that all scrolled at a different rate. And I have to say, this is probably my favorite technique, because I like that it's only CSS, and I think that there's a lot of possibilities for making this look really cool. So after leaving pure CSS techniques behind, we now have the third of four techniques, which is our simple JavaScript technique. Here were are using JavaScript to add classes to the page, which we're then using to trigger CSS animations as the user scrolls. This is a very light JavaScript technique. It was under 50 lines of code, but just like the last technique, this has a lot of possibilities. And finally, we went full-tilt in our fourth of four examples by using the GSAP JavaScript library by GreenSock. So we used a variety of different methods to create the tweens that you see here. And remember, with this technique, your code is isolated in those scrolling sections. When you have a scrolling section in your page, it doesn't matter if the content alters above and below it, and that can be a huge help in the long-term of your project. And lastly, it's always good to have some inspiration, so here are some examples of sites that I found that do a lot of the same techniques to what you've just learned in this course. So this site is really similar to the first effect, except that instead of a static image, it uses a full-screen video. This site for the game Firewatch is really cool, and if you're like me and you like that second parallax layer technique, this is a really great example of utilizing that. The atmospheric perspective that's established here by using that effect is just so mesmerizing. This is a visually interesting site by the automaker, Peugeot, for one of their new models, and it incorporates a parallax effect, but it has some horizontal, as well as vertical, parallax. To be able to do the horizontal parallax layers, you would need more beyond just CSS. And this is a new site for the Seattle Space Needle, and right off the bat, the cool thing is that you scroll up from the bottom. This site uses many parallax layers, as well as a lot of different tweens that are triggered all throughout the scrolling process. And that brings this course to a close. Thank you so much for watching, and I hope that you are excited to use some of these techniques in your own projects. I wish you the best of luck on your scrolling journey. Course author Anthony Harris Anthony is a lead designer at SoCreate. He has worked in the web industry for 10 years and loves all aspects of the internet. Course info LevelBeginner Rating (28) My rating Duration1h 0m Released25 Apr 2017 Share course