All language subtitles for 4. react-lottie

Body move in.

Allowed us to export our animation as Jason.

But react to Lodhi is a library on the other side that is going to allow us to render that Jason as

an animation on our page all include a link to the react what documentation page here attached to this

video where we're going to get started by going over the options that we have to configure our animation

and as they say here this is a wrapper of body moving J.S. which allows you to render the Jace on the

body move and has exported.

It's really simple to use and all we'll have to do to get started is npm install the package so we'll

go ahead and copy that right now and we can see how they set it up is just importing react Lodhi as

a lady component and then importing the animation data as well.

They import that from the Jason that was exported from body move in.

So if you skipped the body move in videos all you need to know is we moved the data.

Jason into a data J.S. file so that all of the images would be contained within the one file.

Otherwise the Jason tries to reference them from another location and then just gets a little more convoluted

so that's why in the project 1 files that you have downloaded all of the animation data are within their

respective folders and then data dot J.S..

So that is where we'll get our animation data from but we'll still be using it in the exact same way

as they have here in this example where they pass it as animation data to a default options object this

default options object is basically what makes React quality work and is where you have some customization

for how your animation will work.

You can see down here the props that you can pass to Lodhi as our options which are the loop auto play

animation data and renderer settings the renderer settings will always really just use this preserve

aspect ratio of X mid why mid slice which for all the animations I've worked with has rendered them

perfectly and then the animation data you pass in the animation data that you've imported and then the

last two are optional you can make sure that the animation will loop and it defaults to false so we

will be setting that as well as the auto play property which will also need to set to TRUE because it

defaults to false as well.

We want to make sure that as soon as our page loads the animations are playing without the user having

to press a button or interact with them at all.

So you just have to set up that options object and then you pass that object to the options property

on the Lordy component that we import from react.

Lady then you need to specify a height and a width.

And here you see how they have used the is stopped and is paused properties for programmatic time control.

We won't be needing to do this because our animations are not interactive and we're just going to be

letting them play.

So that really is all we need to get our animation into our application.

We'll just import react lady pass in r animation data to the default options.

Passive default options to the audio component and we should have an animation on the screen so let's

go ahead and we'll start by bringing up the terminal or your command line and if you're a development

server is running go ahead and stop that real quick and let's paste in that command that we'd copied

the npm install dash to save react dash lady and let's go ahead and run this to install the library

all right.

And I've got that installed currently at version 1 point two point three.

You can go ahead and start your development server backup and now that that's loaded we are ready to

go.

So I'm gonna go ahead and shrink this down.

Right about there and bring up the code.

ED So we finally now want to actually add content to our home screen but all we have right now in the

app dot J.S. is our dummy component with our height.

So we need to replace this with an actual react component let's come over to our components folder and

create a new file that we're going to name a landing page.

J.S. let's import react from react and import Lodhi from react.

Lady next let's create a new line and we'll import our animation data from up one directory animations

and then landing animation and inside that folder are data dot J.S. let's come back to the top for a

second and we'll import our Make styles from app material.

She UI soft core slash styles just so we can make sure we have everything set up and ready to go.

So we'll keep coming down and create are constant of use styles set to our Make styles function and

we'll get access to a theme make our arrow function and make sure to get the parentheses.

And then our brackets will open this up for our style object but we'll just leave it blank for now.

So keep coming down and we'll finally export default function landing page and then we'll open that

up create are constant of classes equal to our use styles hook and we'll also create our Conte's default

options and we can go back to the documentation and let's just go ahead and copy that whole object actually

and we'll paste that right in here.

And since we use the same name it's already grabbing our animation data that we have imported and we

actually do want true on loop we want true for auto play and we're going to leave the renderer settings

as well so we literally can just copy over the default options from the documentation of React wadi.

All right.

And finally to see our animation live for the first time let's go ahead and we will return a Lodhi component

with its options set to the default options that we just created.

And then we're going to add a height of Make sure you get the brackets 100 percent 100 percent and you'll

get the quotes in there as well and they width equal to 100 percent as well.

And that's because I just want these animations to take up all of the screen space available to them.

But as you can see in the documentation you can also specify a fixed pixel value as well.

Let's go ahead and close up that lady component.

And now we can go ahead and let's flip back to our development page going shrink this down and let's

go ahead and save this real quick and you will see anything happen.

And that's because we actually still haven't done anything to get rid of the dummy component.

So now let's go over to our app dodgy s file and underneath our footer import let's import the landing

page from components landing page and now it will come down to where the component property is for r

slash path the home route.

Let's go ahead and inside of those brackets get rid of that arrow function that dummy component and

let's pass in the landing page component.

We just created and if we go ahead save this now the page will actually refresh and you can see a very

large version of my landing animation.

So that looks really good.

I'll go ahead and if you just click on it you can actually pause that.

So that's a nice little trick.

But you can see just how easy it was to get reactive body set up in and put an animation on the page.

So let's go ahead and inspect this real quick just to take a look.

Because I think it's kind of cool and you can see that this is actually rendering it as an SVP.

So this is properly rendering that Jason to an SPG which as we've gone over is our superstar file format.

So it's awesome that we can get our animations so easily in that same format that we had wanted for

all the rest of our images.

And I think that that really helps with the overall optimization of our site.

Now we definitely don't want this giant huge animation here.

And real quick I just remembered.

If you see this little warning down here it's actually saying that the component will update function

that the lady component is using is actually going to be outdated soon.

So the react velocity package needs to be updated to include the newer lifecycle methods and by the

time you're watching this maybe that has happened.

And so you might not even see that but until then don't worry about it it won't cause any problems for

now.

But let's go ahead and we'll fix up this animation and get the rest of the text for the hero block built

all in the next video.