Change your Theme on PageScroll with Motion.page - (Using Variables)

Hello, guys. Welcome back to the channel. My name is Luke Allen, and today I'm going to be showing you a cool animation. When you scroll down on your website, the whole theme changes, going from a dark theme to a light theme. We're going to achieve this using variables. Motion Page is quite nice because we can target variables using the custom box, and I'm going to show you how to do that.

We're also going to be using the Core Framework in this example. Now, you don't have to use Core Framework, but it does make this much easier, as Core Framework converts all of your colors into variables. It's very useful and makes this much more efficient. But like I said, you don't need Core Framework to achieve this. You just need to set up some variables in your CSS and then apply those variables to the elements you want to see change. As I go along, you'll probably understand that in more detail.

So here's what we're going to create today. As you can see, we just have a basic setup here using some custom-made templates. As I scroll down here, we have some testimonials, and we get this nice change as we scroll. If we scroll even further, it will revert back to the dark theme. It's a pretty cool effect and reverses as well when I go back up, as you can see. It's quite simple, not so difficult to achieve. It might need some setting up with the variables, and like I said before, you'll just need to apply those variables to everything that you want to see change. Variables are quite powerful, as you can see, we can achieve quite nice results like this.

Let me show you how I went about achieving this. Just a couple of prerequisites for this: once again, I will be using Oxygen Builder, like always, but today in this video, I'm also going to be using Core Framework, which is our new CSS framework, as some of you guys might already know. It's very convenient because we can set variables in here, and in order to achieve the animation that we want to make today, we will need to be using variables to achieve that. This just makes that much easier.

Now, if I show you the CSS here that's generated, we will be manipulating the primary variable, which obviously has colors set in here, the secondary, the dark and light, and maybe another one as well, we'll see. If you don't use Core Framework or anything like that, then it's still easy to achieve. You'll just need to make sure that you have your variable set in your root and just apply a color to a variable. Then we'll manipulate those variables within Motion Page. If you are interested in Core Framework, I'm going to leave a link below in the description, so please do check it out. It is amazing.

So here, I've just set up a blank page in Oxygen, and I'm just going to go ahead and add some sections here. I'm not going to be designing these sections today; these are already pre-made because the focus obviously is on the animation and not the design itself. So let's go ahead and add one of these. I'm going to use this one first. I'm going to add three more sections here, just something quite random, testimonials. I'm going to add another one over here. Let's try one of these, and then let's add one final one, for example, pricing, something like this will work.

All right, so just to give this some randomness, I'm just going to go ahead and change this background from BG Dark. Now, this class here does have a variable attached to it, so just keep that in mind, but I'm just going to get rid of this and add a different one. I'm going to add this one here, which is just a little bit darker than the rest, just so it's separated from the header there. I'm going to leave this one and I'll also change this as well. I think that's okay for now. I'm also just going to make sure that these are using the correct variables. So I've got a gradient, yes. As you can see, this class here has attached the variable primary, which is actually good for our needs, that's what we need. I think that looks okay for now.

So what I'm going to do now is just open up Motion Page and then show you how we can change the overall appearance as we scroll. Save this, and I'm going to open up Motion Page. Cool. So for this, I think we're going to create two timelines, and I'll explain why in a moment, but let's just focus on one first, and then we can just duplicate the one that we create. So I'm just going to call this something like "Theme Change One." Let's target our new page that we've created here, "Variable Changer."

So as you can see, here's our new page that we created, and all I'm going to do first is set this to scroll trigger. We don't want to lock it to the scrollbar; we want this to happen instantly as it hits one of these. So I don't need this one today. And then what I'm going to do here is make this selector because we want to make it change as it hits this section here. So I'm going to use this section as our trigger. I'm just going to click this, select our section here, and I'm going to set this number to somewhere around the top, so maybe around 15. And then I want it to end when also the top also reaches 15. So I want these two to be together, and we just want the change to happen instantly as it reaches both of these lines. I'm also going to select the section here as well.

Okay, so that's your basic setup there; that's all you need. And then all we need to do next is select every section where we want the changes to happen. So let's just focus on this one for now. So all I'm going to do is select this section. So as you can probably guess, we don't really need to change anything from because this is the original state. We want the changes to happen on two as we scroll down, and then I'm going to use custom here so that we can target our variable. Now, the background here, this is using the variable called dark. So I'm going to target dark first, and then what I need to do, if I go to Core Framework, you can see here, there. Now, the main color for dark is this one here, but I want it to change to this color right, which is also the same as light here. So in order to do that, we need to grab this color, which is this one. I'm just going to copy this value and I'm going to pop it in here. So dark will now become a light color, as you can see that's happening there.

Now, I do need to set one more option up here, which I forgot, and that is toggle action. And I want to select "Reverse on Scroll Back Leave," which means when I scroll down and then go back up, it's going to change back like that. But already, you can see we're getting this cool effect. Obviously, we need to target some more variables, but so far, so good. Now, I do think that's quite long, so I'm just going to make this short, maybe 0.3 seconds, so it's a sudden change like so.

Now, you probably guessed that our text here, it's a light color, so all the text is using the light variable. So we'll also need to target that one as well. So I'm just going to click on this plus sign, we'll target the light variable like this, and then we'll set this to our dark color, which is this one. So pop that in there, and now you should see the text also change like so. So pretty cool, you can see the icons are also using the light variable. So it is important, guys, that if you want to achieve something like this, that pretty much all your elements need to be using variables, right? And that's the nice thing about Core Framework; everything is converted to variables, so it becomes very easy for us.

Now, a couple more things, we do have two more variables here's using primary, and then this one here, the yellow color, is using secondary. So I'm just going to add two more. I'm going to add primary. So over here, we can see the primary color is actually this light purple, and then we want it to actually change to this color here, which is this one. So I'm going to go ahead, pop that in there, and then I'm going to do the same for secondary as well. So I'm going to grab this one, and secondly, we're just going to put that one in there. So those purples now should become a little bit darker, and also the secondary border here, you can see, is much darker as well.

Okay, so that's pretty cool. Now, you'll notice when I scroll down that only this section here is changing, and that's just because of this section here. So whatever is in view, I recommend to add the sections that are in view. So I'm also going to add this section. So now this section has been added automatically; every variable contained within this section should now change as well. Now, I am seeing a slight issue here, so let's go to Oxygen. The issue is some things are changing; I can see the buttons changing, but the background is not, and I do know why. I'm just going to show you. So as you can see, I added this BG Dark D1. Now, this is actually using a different variable. So if I go to Core Framework here, and I go to this, you can see that this variable is Dark D1, and we forgot to add this variable. So all I'm going to do is copy this light color, which is using the same variable that D1, and I will just add that to this here. So it is Dark D1, and then I'm going to add the light color just so that the background can now change.

Okay, cool. And then as I scroll down as well, we might also need to convert this section as well. So I'm just going to go up here, simply select this section, and then that automatically will change. So now you can't see the below section, but when you do scroll down, what we're going to do is set up a different timeline so that when this section's bottom reaches this line, we'll change everything back to its original state. Okay, so around here. But as you can see, that's pretty much done for the first part. So I'm going to save this timeline.

And then all I'm going to do now is go here, duplicate this timeline. The reason I'm duplicating this is because we just need to change these values here. So from top to bottom, bottom. And then all we need to do now is change these variables back to the original value, and it's as easy as that. So if I go back here, I'm going to grab the original dark color, which is this, and we're just going to switch all of these back. So I'm going to do two spaces there, I'm going to copy this one, which is the light color, pop that in this box without any spaces. Primary is going to be this color here, secondary is going to be this color here, and then dark D1, if I open up this one, it's going to be this color here.

Alright, so I'm going to save this timeline. I'm just going to refresh Motion Page just in case. Here, so now as I scroll down, we're going to reach the first trigger, which is our first timeline there. You can see, and then as we scroll down, remember this timeline, so timeline two, I should rename this to two. Remember, we're going to trigger this animation when the bottom of this section, because we've selected bottom here, so when this bottom area reaches this point, it should change back to their original values, like so. So pretty cool, this is the power of variables, and it kind of looks like a nice theme change. We're actually not changing the data theme itself; we are just manipulating the variables.

So if I save this and just have a quick look on the front, so here's the page. I'm going to scroll down here as usual, get a nice theme change there. We keep scrolling down, and yeah, that looks pretty good. It's a nice effect, and as you scroll back up, we get the reverse effect because we changed the toggle, the toggle action here to reverse on scroll back leave, and that just gives it a nice reverse effect. Obviously, here you might want to change this color as well, so I'll show you very quickly how to do that.

So if I've got Oxygen here, we'll just check. So this is using this class text gradient primary. So if I go to Core Framework and find where I've made that, so I've added it to the typography tab here, as you can see, text gradient primary. And what we're using for this, for the lighter color, we're using primary L2. So I'll just go back to my colors here, and as you can see here, we have primary L2. So all we need to do, this is the original right here, we could just change it to this color. So I'm going to copy this color here, it's a little bit darker, and then the Motion Page, I'm going to scroll down here, add primary L2. Now remember, this is our second timeline, so we'd actually need to use the original value, which is this one. So I'm going to copy the lighter one here, copy the value, save. I'm just going to open up our original, this one, and we need to make this the darker color, L2. Go back over here, we'll grab the slightly darker one, which is this. So now our gradient text should look a little bit better on the lighter background, as you can see, it's much easier to read.

So just make sure that everything is using variables, and you should be good. We'll save this one more time, have a look on the front, refresh. So as I scroll down, much easier to read. Everything's changed quite nicely, and then when the button reaches the trigger, which is around here, changes back to the dark color. So there you have it, guys, another animation for you. I hope you like it, and if you did like the video, please don't forget to like and subscribe, and we will be back next week with another video tutorial. Thank you very much.

[Music]