Creating Parallax Scrub Animations with JavaScript & GreenSock

Key Takeaways

today I'm going to show you how to create two different Parallax effects as seen here utilizing HTML CSS JavaScript and the green sock animation platform so let's get started if you enjoyed this video check out designcourse decom where you can learn uiux CSS and more with my custom interactive platform that makes learning fun and easy all righty so in this video we are going to be creating what you just saw and what we want to do is I I'm going to link if you're watching this on YouTube because I'm making this particular lesson video as a part of the course free on YouTube watch uh in the YouTube description there's a Code pen link for the before State and the after state of this project this right here is the before State there's no HTML markup as it pertains to the layout um and so that's what we're going to focus on now along with JavaScript the only JavaScript we have is just the the boiler plate code for the smooth scroll Library lennis which trust me I smooth scroll with this type of effect the scrolling effect really uh just adds a lot of uh interest to the design rather than just stopping right when you stop scrolling you don't have to have SM smooth scroll but that's what I'm using and I'm also importing that I if I zoom up with my zoom tool and we'll see we have uh right here this is the lenis smooth scroll CDN link right there okay so the first thing we want to do is get the HTML ready for this and it's actually super pretty super super simple and what we're going to do is let me get up my reference code and yeah so we're going to start with a first an empty section um so if I zoom up here type in section we've got our empty section this gives us something just enough room to scroll to see the effect um and then we're going to have another section with a class of space and this is where uh all the magic happens there's also going to be another empty section underneath so that we can continue scrolling past it to demonstrate the effect so our we're going to have H1 that simply says Cy cyberspace and that's literally all we have to do for the HTML even though each individual letter is moving up and down we're going to use the split type JavaScript library uh that will essentially grab this H1 element and then split each character it finds up into its own I div element essentially uh and that's would allow us to as a class to Target those and then we can randomly change the Y value um we're also going to have our four Images uh that are part of the gallery and so that source is going to be images for SLS space one.jpg I'm just going to type space for the alt control shift down four times or however many times you know you want two three and four and that's all we have for the HTML so now if I switch gears and we go to our SAS and I am currently watching the SAS file um we're not going to spend time writing everything from scratch but there's only really just a few I rule sets so the first one is just going to be box sizing border box on all we're also going to have a body element the body element simple we just have a margin of zero height of 100 viewport height font family bbas newa uh font weight 400 color black we're also going to have our sections our H1 element and then the images that I'm just going to paste that whole section in and we'll just quickly go go over it so let's hide this go up at the top so first we have our section we're using a height 100 viewport height so that's going to apply to all three sections that we have we're going to have a position relative display grid Place content Center this right here this display grid Place content Center will take that H1 element and Center it horizontally and vertically within the section um and the H1 element we're doing a font size clamp and letter spacing and then each of the images we're uh making those position absolutes Z index is ne1 so that we can see the actual text I aspect ratio 1:1 object object fit cover with 11% okay now we're taking each one of those four that it finds and we're just uh using the top and left values because they position absolute to just put them on you know different areas uh number two I put Z andex one because I thought it would be cool to overlap just one of those images over the actual uh H1 element and that's it so if we save this make sure you're watching your SAS file and you right click open with live server if you want to go that route we'll see that if I go to my code the browser here uh that's not it that's the uh finished version this is what we look like right here this is what our page currently looks like without any type of JavaScript outside of the smooth scroll all right so now we want to I animate these things in obviously two different ways the images are doing something different and then the cyberspace is doing something entirely different as well so let's go ahead and Define some of our JavaScript properties now that HTML and CSS is done so over here we're just going to create a con of heading a document of query selector H1 so we got our H1 heading split is going to be new split type heading all right so right there I split type this is where this is coming from this is a CDN for the spit split type JavaScript library and this is how you use it so we just we grab the H1 element and then we pass it in I as a new split type very simple and you'll see how this comes into play in a second now let's get all of our images so document or instead of using this since we're using the green sock animation platform which is included right here at the very top import uh we're going to go ahead and use a utility gap. utils do2 array because we have multiple images and we're just going to specify the image element and so that takes these all and puts put them into an array all four of these okay after that what we want to do is we want to essentially get access to all the letters created by split type right here all right so if I do a console log of heading split and save that and go back to our browser and hit F12 we'll see we have this right here x so if we open this up and we look at the characters we have a div here's what it's doing essentially it's taking this H H1 element it's inserting a parent class called div class line because it's essentially one line uh you can have multiple lines that's why they do that there's also words you can have multiple words of course and then we have characters it's only finding one word because we simply have cyberspace that's it and then we have a each character is accessible as you can see here as I hover over these in their own diva elements all right very important to understand that um so let's get a reference by creating a property called const letters equals heading. query selector all and we'll just grab Char and that class Char is created by split type with each of those individual elements okay so now what we're going to do is we are going to before we uh iterate over each one of those letters that we just defined we and by the way this is for the The Heading element where it the Y percent value of each of the letters is changing based on scroll uh we're going to create a function and this function uh we just type in get random actually I'm probably not going to sit here and describe this just because it's a random function and it's a helper function essentially so what we do is just right here I get random this is how we use it we put a minimum number and a maximum number and it simply just does some math random just to give us a a a number that falls between the minimum and maximum a random number okay out now what we can do is we want to iterate over each of the letters so we're going to say letters. for each letter and index and inside of here we want to create a constant that we can reference so we're going to call it uh something like random y% equals now we're going to call our get random function and we're going to pass in a value of 70 and 1100 and I found out those were you know for my purposes that's what I like the most you can Tinker with those to see how to adjust the height of the or the displacement on the y- AIS of each of those individual letters so now that doesn't do anything itself we just have a con where it's storing this information so now we're going to use green soof so gsap we're going to I not set sorry we're going to use the from two method you could use from you could use two or from two from two gives you most control because it allows you to Define the initial State along with the end state of each of those characters and what I mean state is basically the CSS properties that you want to Define so from two we're going to say I our letter and what we're going to say is y% is going to be uh hyphen negative random y% now you can remove this hyphen right there uh that little negative sign and it will make the displacement of the letters on the Y AIS in the opposite direction so just experiment with both of those if you wish and we're also going to make them opacity zero all right so that's the initial uh from this is the starting State all right then what we want to do is put a comma after this first object and maybe for better readability we can do this we're going to add another object and this is two so this is the from right here and then the two these two letters is right here in this object hopefully that makes sense so now we want it to go where well we want it to go to the original position so we just simply say y% zero then opacity one now we set up our scroll trigger okay the scroll trigger is going to to be the trigger property itself is going to be heading now remember heading is defined up here with query selector H1 so we're just defining that as the element that will kind of I dictate when the uh the Y perent value all this stuff right here that we're defining when it will start to animate essentially you can make that pretty much any element on uh the Dom if you wish so I we're going to say start and top bottom which simply means the top of the when the top of the heading hits the bottom of the viewport if that makes sense all right and then we also have end bottom center and then scrub true this part is very important because this makes it based an anim that's not based on time or duration it's based on your scroll distance so it's a scroll animation okay so let's I zoom out of there let's save this and see what happen so far there we go so let's get this out of here and what's cool is if I refresh this they're random so every time somebody visits your page and they counter this effect it's going to be unique at least in the IDE a that you know each one of these letters is just randomly coming from different areas now if I remove that negative I value which is right here and save it's coming from the bottom this this time before it was coming from the top so it's all about your preference I like it coming from the top personally like this now these images so now that that effect is done and by the way you can really play with when this stuff starts to animate in and fall into its final position by adjusting these values right here you can adjust a different trigger uh which is in this case uh it's just the H1 but it could be you know maybe maybe the section itself um and also the start and end values so I've I I've definitely covered scroll trigger and these values more in depth so just do a YouTube channel search for scroll trigger and if you want more exclamations about how that works you can do so okay um now we want to get just some Parallax on each of these images because right now they're all just animating at the same speed which is okay uh but it's in this context of this type of project it's a little bit more interesting to have them animate at different speeds so that's a parallax so what we'll do uh we already have the property where we're getting all the images in which we want to specify this information what we want to do though is we want to come back to each uh image and give it a custom data attribute data hyphen and that those first five characters data and then a hyphen is required for a custom attribute you have to add data hyphen and then whatever name you want it to be we're just going to say speed and for us the speed is going to be a value um we're going to use negative values which you can use like -6 and then we'll paste this right here and then we'll just uh play with these values and you know you could play with them and adjust them based on the results in the browser and how you want each of those four Images uh their speed to be impacted on the Y AIS now just adding this alone does nothing I we actually have to utilize that in JavaScript so first let's go ahead and give this a comment this is our heading animation and then down here this will be image Parallax okay very simple what we want to do like I said we have imgs for images and we want to iterate through each one of those so IMG for each we're going to pass in the image as a reference and we want to grab the speed the data attribute that we just add data hyen speed we want to we want to grab the value for each one of the images that we're iterating over so we're going to say con speed equals image data set speed so that's how you reference custom data attributes right here data set and and then the name of the custom data attribute minus the the data hyphen you don't include that it's just whatever is after it after that we're going to use gsap 2 Method All right so we're going to put the image we're going to say y percent oopsie hold on y percent we're going to say speed and we're going to multiply this by a factor and you can do this optionally um we're going to do it by 50 and then we're also going to say ease is none and we're going to do a scroll trick Trier on this because this is a scroll activated Parallax animation the trigger is going to be the image itself which you can completely do you can also do a start here top bottom you don't have to put an end and we do want to put scrub true because it's tied to the scroll and not a duration so let's come down we could see if you take a look at these two here how I the top one is moving faster than the bottom one and so you can really play around with these values they're all pretty similar up here with the data set speed like for instance negative like the one that says -3 that's not going to move as much but if we change this to something like 14 let's save it I believe that's the one over here you can see that it will move faster a lot faster in relation to the other elements on the page and that's how you control that now what we might be interesting as well is just to use that little negative I option right here I'm not sure what this is going to do but if we add a negative or a minus right to the left of speed okay it's it's affecting it except in the opposite direction especially this one down here I wouldn't advise using that I but nonetheless this is the actual project very very very cool stuff