All language subtitles for 7. AppBar Transitions

Now before we move on in the next video to customizing and styling this app bar using material you eyes

styling system.

I wanted to go ahead and add a kind of cool feature to this that it actually shows on their documentation.

So if you go down through their examples you'll find here where it says scrolling and they have two

examples here.

The scroll to hide app bar which you can see right there.

So as I start scrolling down that disappears and underneath it the Elevate app bar.

So you see how this is flat.

And it looks as if it's integrated with the same page as the text.

But once you start scrolling you can see that very suddenly here where it comes up and goes back down

I actually really like this effect.

So let's go over and look at the source code and see if we can't get it to work for ourselves.

The first thing we need to do here is copy this function.

This elevation scroll.

We're going to copy that and we're going to flip back over to the code editor and place this in front

of our header function.

We're going to paste that in and then we can go ahead and get rid of the prop types part and now you

can see that we're missing the use scroll trigger.

So let's go back over here and you can see that they just import that from material UI.

So we're going to copy that and import that as well and now all we have to do is come down here and

actually use it.

So the elevation scroll cause that and then come underneath here and put our closing tag and if we go

ahead and hit save we can come back over here.

And if you go over into the app you won't see any changes yet.

So let's go back to the material UI example and keep scrolling down to here where it has this array

that it creates.

And we're going to go ahead and copy this and then go back to the code and use this just so that we

have some extra text on the screen and you can see the scrolling effect take place.

And so if we come to the app dot J.S. file and underneath here instead of our hello let's go ahead and

paste in what we had copied from the documentation and changed this 12 up here to one hundred and twenty.

So this is going to create one hundred and twenty copies of this on our screen which should be plenty

to show these scrolling effect so let's save that and flip it back over to the browser.

And now you can see obviously the screen is full of text and if you look up here our app bar you see

it's flat.

But when we start to scroll you can see it start floating.

And this actually is just enough to make it a Scroll on my screen but you can still see where it goes

from flat to floating flat to floating.

It is really subtle so if you just look up here at this top line you can see the top of like that see

right there floating flat floating flat pretty cool.

And it was honestly not very hard to set up so let's look for a second.

Some of the options that made this work

here in the header file if you take a look at the function that we imported from the material UI documentation

the first variable that you see is the trigger or constant actually.

And this uses the use scroll trigger hook from material UI which essentially is an event listener for

when the user is scrolling.

The first option that set here is the disable hysteresis and I don't know if I'm pronouncing that correctly

but what that means is whether or not there's a little delay when the user is scrolling.

So sometimes when you want the app bar to go away the hide on scroll.

You actually sometimes will have a little bit of a delay in there but for this we don't want that.

So we disable that and then right below there you see the threshold and we have that is set to zero

although it defaults to 100 that number controls how far the user has to start scrolling before it triggers

this event listener and so with a zero.

As soon as the user starts scrolling it will trigger it whereas if you put in say the default on 100

you would take the user scrolling farther down before the event listener actually triggers.

Now we actually don't need under here where it says and sets the target.

This is actually up here what it's talking about is it's only being said here because the demo for the

documentation was in an AI frame so it will default to window so we can go ahead and just get rid of

that.

That means you can go up here and delete the window from there as well.

And if you want to you can go ahead and get rid of that comment put a little space back in there and

then the last part that you'll see is where it returns at the end.

Here a new version of whatever component you are wrapping with elevation scroll it clones the children

and returns a new copy of that element with a new elevation depending on whether or not the trigger

has been set.

So if our event listener has set this trigger then it will have an elevation of 4.

So that is our floating state.

Otherwise it will remain flat.

And that is with an elevation of zero.

So then all we had to do was take that function and wrap our components with it and we got that really

nice easy functionality.

So I really am glad that the documentation had that and made it so easy for us.

Let's go ahead and get rid of all of that extra text and replace it with our hello again so we can give

that a save go and check and you see the halo is covered up by that app bar again.

So let's go ahead and start taking a look at how we can solve that and all the rest of the features

that we have available to us with the material UI theming system in the next video.