Original subtitles

Now we're going to be starting on the first row with our animations for this page there will be a slight

change to the design that we had went over in the overview and that's actually because of the animation

that I had made for the scale section in the design file.

It looks like I have a pie chart.

And that was animated so that the sections of the pie chart it would get bigger and it would take up

the full circle and then that would circle around with another section and that would continue in a

loop.

But for some reason I've noticed now on my actual deployed Web site as well as when I was testing building

the page for this course that that animation is now flickering whenever it runs and I'm not sure why

this is.

I'm not an After Effects expert and I'm sure it's just a problem with the way that I was creating that

effect.

I believe using an expression.

So something must have updated I think since I made that and possibly caused some compatibility issues

but I just went ahead and made a new animation entirely for it and I think that this actually does a

better job of getting the message across.

And I think it's a bit of a core animation too.

So we're kind of worked out anyways let's begin by coming down and under the grid wrapping our entire

row here.

Let's find.

See this is for our heading this is for the arrow.

So this row here wrapping our entire middle icons.

So underneath that with just one grid tag underneath let's add an adjacent grid item container direction

row open that up.

The first item in this row is going to be for the digital documents and data section.

So let's add a grid item container.

And this is going to have itself a grid item container but with a direction of column we can open that

up and this will have a grid item wrapping a typography variant.

Age 4 and this will say digital documents and data and then we'll come down and add a grid item underneath

that one and this will be for a typography variant of body one that we had now set up actually.

And then we can open this up and let's go ahead and copy that.

So I know we'll need a couple of these and let's open up our design file again and we'll scroll down

here to the digital documents and data section see with three paragraphs.

So let's go ahead paste that two more times and then we can copy in all of this text.

So we'll get that first paragraph in our first body one second paragraph.

The second typography and the third paragraph in the third so it's clean up and then we can get rid

of the design file for a little bit.

We'll just hide that away and save the page.

Now see this refresh.

And underneath we now have our little paragraph let's clean this up a bit though.

And on the grid item containers.

So just this regular container.

Right underneath the direction of a row.

Let's add a class name of classes dot item container.

And this will be the container for all of the texts in each of these sections.

And it will come up to set the item container style to a max width of forty M. So let's save them a

page or refresh.

And now all of our paragraphs are much tighter next to each other although we actually did forget to

put on the paragraph property onto all of these onto all of these body one typography is.

So make sure we add the paragraph prop to all three of these and that we'll just make sure that we get

that spacing.

Now let's open up our landing page.

J.S. real quick because we need to come down and at the top where we have the default options constant.

Let's go ahead and copy that over and into our custom software.

Dot J Yes we will come up to the top and under our classes constant Let's paste in that default options

and then change it to documents documents options we then need to grab our document animation.

So what's come up here.

And underneath those imports will import the documents animation from animations documents animation

data dodgy yes and then we'll change the animation data here to our documents animation that we had

just imported now let's scroll down in inside of our latest grid item container of row and then inside

of that container for the digital documents and data section next to our grid item container direction

of column adjacent to this grid item.

Let's add a grid item and this will contain our lady components with the options of documents options

we had just created and then we can go ahead and close that off.

So let's save this real quick.

We'll see the page refresh.

And underneath we now have a very large nice animation.

I'm going to go ahead and stop this animation real quick and for some reason I've noticed that the auto

play is set to false here but it is still continuing to play these animations.

And if I have these just playing non-stop that's going to mess up the editing for these videos.

So what I'm going to do is I'm going to come down to our lady component and I'm going to add manually

the is stopped property of true and I'm going to save that so that the page will refresh.

And now the animation is not going to play it will just sit here although I can click it and it still

should play.

So you can still see the animation is working but I am just going to go ahead and leave it at stopped.

So that way I don't have any editing issues but you can go ahead and keep yours playing if you want

to see the animation now to get these components to be sharing this space available up here instead

of forcing the animation down onto a new line.

Let's go ahead and we'll add it onto this grid item wrapping the lady component the medium property.

And that means on our grid item container with a direction of column.

We will add the medium prop as well and we can save them.

See the page refresh.

And now they're sitting right next to each other.

But our animation is definitely being cut off that is not really the work that we are wanting it to

have of course.

So it's come down to the Loni component here and let's go ahead and add a style prop set to an object

with a max height of three twenty five a max width of two seventy five and eight men height of two seventy

five as well.

So let's save that and we'll see the page refresh and you can see the part of the animation is still

being cut off here.

And I think that that's probably because we haven't added this other item and that will change the spacing

here a little bit.

So these numbers might not be perfect yet until we get the rest of the content in.

But the way that I am coming up with these numbers and the max height and the max width and the men

height that I've said these are from going through and trying out different Max heights and seeing how

that affects the animation and seeing how that affects which parts of it are being cut off as I increment

or decrement that number.

And then by setting the width for that as well the max width that allows me to control the aspect ratio

from the width and the height to make sure that the animation never grows to a size that it will be

getting cut off at.

So you just have to go through and play around with those numbers to see which ones are the golden ratio

for your animations to make sure that they're rendered correctly without any cut offs but let's just

ignore that for now and we'll fix it in a second if we have to.

But what I want to do is go ahead and take this entire item container the entire item container and

we are going to copy that and then go ahead and we will paste it directly underneath then let's start

and we'll come and change the title up here to scale.

And if you remember for the scale section we actually have our animation in front of the text.

It is on the left of it.

So let's take our grid item wrapping the lady component and cut that out and underneath the item container

for this Let's paste that in.

So now our animation will be on top of or to the left of the text.

This means we need to scroll up and we'll need to copy the documents options.

Paste this and change that to our scale options now.

But let's come up and import the scale animation from animations scale animation the data dot Jason.

And then it will come down and in the scale options let's set to our scale animation.

And now we can scroll all the way back down.

And in this Lodhi component that we had moved up on top of the scale text.

Let's change the documents options to now scale options and then we can actually get rid of the men

height property for this one didn't need to use that and set the max width to two eighty and a max height

of two sixty before we save let's open up our Adobe SD design file come over to this scale section and

there's just one paragraph that we have to copy so we can get rid of these other typography components

and the code editor and we'll just paste in that one paragraph go ahead let's minimize the design file

and let's save the code so we can see this refresh and now we've got these scale section popping up

although we are not seeing these scale animation this is actually because these scale animation starts

out with nothing being there and since I have it set to automatically be stopped it's not continuing.

So if I were to get rid of this and then save the page we can see the page refresh and now the scale

animation has appeared.

So the little people animation popping up I think that does a pretty good job of showing scale you know

showing growth but I'm gonna go ahead and turn the is stopped of true back to being on and in that way

the animation will be stopped so you won't be able to actually tell but it is right there.

I'd just have to click on it and I can make it show up but wait for it to go away and we'll go ahead

and stop that before we take a break real quick look over at the text here and you'll see how it's all

left aligned because we copied it from this section which is left aligned but for our section over here

on the right we want all of this text to be right aligned so on our typography variant H four for the

scale title let's add a a line property of rights and we can go ahead and only paragraph here we can

add the A line equals write property as well we can save that and now our text has jumped over to the

right side this is a decent place for us to stop though so we'll take a break here and we'll keep working

on the next part of this page and I'll see if I need to fix this little bug right here with the animation

or not but I'll figure out the right numbers for that and make sure that we have it all set up in the

next video.