00:00hi so for today we'll be showing how to
00:02use Dora to create this wonderful
00:05airpods Pro Website Layout so it
00:09contains office group animations videos
00:11and Etc and you will be able to
00:14accomplish all these easily through Dora
00:16for now we're going to start our
00:17building process let me just open a new
00:20project by default it's going to give
00:22you a desktop view and this is good for
00:25for today's tutorial this will include
00:27the first screen and the second screen
00:29as well so for this first screen we
00:31could see there's navigation we can see
00:34there's a hero section with their
00:35earphones and the earpods and also some
00:40so the first thing we'll do is to start
00:43with the navigation bar
00:46so for the navigation bar I will be
00:48using the component function here this
00:51is not so necessary for only building
00:53the first home page but it's really
00:55useful when you're building your whole
00:56website because component allows you to
00:59use things again and again and when you
01:02change it it just boom changes in every
01:04page you have so this is gonna speed up
01:07your design process so for the
01:08navigation bar I will set the size to
01:12um at the height of 52 and give it a
01:15black color background
01:17and type in earpods Pro
01:22airpods Pro second generation
01:24let's set the width as hug content the
01:28size of the box would automatically
01:29change when you set it as how contents
01:32and the type size for this should be 21.
01:35and then now I'm using the constraint
01:37function so here I just want to stop for
01:40a moment and take some time to explain
01:42uh what constraint layout enduring means
01:45so now I have switched to Dora's
01:47constraint layout tutorial and I'm just
01:49gonna explain a little bit about this
01:51position constraint so as you can see on
01:53the left hand side there's a gif you can
01:56just bind the things together
01:59and what we will do here is for example
02:02I'm binding the left hand side of the
02:05orange block to the right hand side of
02:08this right block on the right hand side
02:10we could see there's like 100 pixel uh
02:13gap between these two cells and if I
02:15like expand this stuff
02:18even though this one is changing
02:20this orange thing is still having a 100
02:24pixel gap between it
02:26and we could do something like Center as
02:28well for example I am aligning the top
02:32of the blue to the top of the orange
02:36and then even though I move up
02:40the blue always stays centered with this
02:42orange thing or for example
02:46I put this blue inside of The Orange Box
02:50and then I use the Align Center feature
02:52a light horizontal centers feature here
02:58so now no matter how big The Orange Box
03:01is the blue always is in the horizontal
03:04Center of this orange container so there
03:07are like shortcuts here you could see
03:09and this is really helpful when you're
03:11building a responsive websites because
03:13you can like set the gap between stuffs
03:16you could like uh constrain like images
03:20or text into a specific place of your
03:23container then I would create the small
03:25buttons on the right hand side as well
03:27for this I'm gonna use 12 point size
03:32and then I'm gonna draw the Blue Button
03:34as well so for this uh we will use the
03:38container feature I'll set the correct
03:41size which is 45 by 24. and let's just
03:45set the color into the like the mid-tone
03:48blue they have there
03:51and then set the radius to 20 then it's
03:53going to give us a nice button look and
03:55now you just drag the text in the left
03:57hand side the layer part we're going to
03:59set this as both vertical and horizontal
04:02Center and next I'm going to put the
04:04space between the text
04:07so each is 24 this is the spacing
04:13and then for the button between with the
04:15text I'm gonna put it as 30. then I will
04:19group all of them together and then set
04:22this to the right hand so this is going
04:28so I went back to track their website so
04:31it's actually a like gray color instead
04:34of like a fully black so I'm gonna
04:36change that as well they also have a
04:38gray stroke on the bottom so I'm gonna
04:39set it inside the stroke as well oh and
04:42I'll set it as like one pixel
04:44and I will choose the gray color
04:47group all the contents together into a
04:51fixed width and when I go back and this
04:54time if I drag this thing in and then
04:56set the width to fill container
04:57background is still going to expand
04:59however this information will stay
05:02centered just like how the Apple's
05:04website has designed it to be
05:06so next up let's create the Hero part
05:09I'm gonna put auto type in let's type in
05:14so I just change all the fonts of the
05:16project to store sense Pro and then you
05:18can use whatever you want here and I
05:20would set the letter space into negative
05:22three percent to match the filling more
05:25and then the type size for this let's
05:30this is almost like the size as it's in
05:34and then I'm going to create a small
05:38and then for those all new let's do it
05:45and then for the buttons I'm gonna do it
05:51so one thing is that there actually is a
05:54small icon there the credit here goes to
05:57bike dance icon Park and I'm using the
05:59play button and the right arrow as well
06:06so I'm just gonna click copy PNG and go
06:09back to Dora and press Ctrl V or con
06:13command V if you're on a Mac and then
06:15let's size it down to like 20 by 20
06:20and place it just to the right of each
06:25and remember to set the constraint
06:26between the button and the text
06:28and we're going to group them together
06:31I'm grouping the text with the button
06:33and also the two groups together as well
06:37so next I will be importing the airpods
06:40image inside which is the animation
06:44so I will drag this image Box by using
06:50and then there's one thing to note here
06:53is the width and the height
06:55instead of setting it into a specific
06:58value I'm going to do something like
07:03100 VH so what VH and VW means VW stands
07:10for viewport with VH stands for viewport
07:15height so viewport is like the size of
07:23uh at the right hand side assets we
07:25could use a select Source we use the
07:28second button to upload image sequence
07:33so image sequence allows you to create
07:35scroll animation inside of Torah so if
07:39currently you have a video that you want
07:42to like do scroll animation in Dora you
07:46could just uh turn it into image
07:52there's like online tools uh you could
07:56use or you could use media encoder from
08:00all work so it's just like changing
08:03videos into like frames of jpeg or PNG
08:08we're back the image sequence is loaded
08:11successfully I want to talk about like
08:12what's the difference between like
08:14setting viewport and view height
08:16so now for example I am creating a box
08:22and then the size is 100
08:28it's it's like full screen right now
08:30because this matches the size of the
08:32canvas but if I go to publish and view
08:38you would see something like this why
08:40because the current viewport of my
08:43monitor is larger than the size than I
08:45set here but if we do something like
08:47this we set this as 100 VW
08:56and we pop we go there now it's full
09:01it's just gonna like move according to
09:08if you want something to be responsive
09:10remember to set it to like VH and VW
09:13since the earpods is actually in like
09:15the top part of the image I would set
09:17the constraint to Vertical Center and
09:19horizontal first then I'm gonna do a
09:22negative like minus 20 uh VH on the top
09:27and also I'm gonna be changing my naming
09:29as well as you can see on the left hand
09:31side having a good naming this system is
09:34going to help you find your stuff easier
09:35because sometimes if all the names is
09:37just like text one text to text three
09:39then it's hard for you to know what it
09:42and now let's dive into the animation
09:45part hopefully you have a watch are
09:47keyframed onboarding tutorial already
09:49and then so here we could see how the
09:52animation is working image sequence is
09:54moving on the front and in the back the
09:56airpods text is enlargic and it's fading
09:58away and then the two small text is only
10:01fading away so here I'm gonna group the
10:04two small texts together so I can
10:06control them together this is going to
10:08and one thing to note about here is just
10:10now even though I have set my
10:12constraints already but now since I have
10:14changed the container you have to set
10:16them again and here I would create a
10:19large container to drop everything
10:20together because I just think about if I
10:23have more than like one screens in the
10:25whole Website Layout then having
10:27different containers to control
10:29different stuff is going to make things
10:30more clean and easier to source so now
10:33let's start the animation part
10:35let's open the keyframe panel on the top
10:41and then what you will see is called
10:43drivers on the page and then if we click
10:46on the S1 container in the layers we
10:49would see a another new button says add
10:51a driver from S1 container one
10:55so for here let me show you a really
10:57simple animation to demonstrate it and
10:59now we have everything on the drivers
11:02page 2 which is this pill page and if I
11:05drag when the viewport changed the
11:07number is moving right first the number
11:09in section one moves then the number in
11:14however say I don't want this section
11:17one right now I only want this section
11:19two and I move it to the top
11:22and I start animate again
11:24it's not gonna animate
11:27it's not anime in the right time right
11:29because what we want is when this is
11:31just moving we wanted to move
11:33immediately but not when this is out of
11:37and if we're using the driver
11:40this is because everything is happening
11:43according to this absolute scroll y
11:44value which is the height of this page
11:48but if we use add a driver from specific
11:52container we are using an offset light
11:54which is like a relative value it's the
11:56Y value of this container not this whole
12:02so for now it looks the same right it's
12:05moving and then when the viewport
12:06changes the second part is changing as
12:09well however see if I don't want this I
12:13or say we I change the direction right
12:16and then I start from load now I start
12:18from the top as I drag as this enters
12:21the viewport it's moving and then as the
12:24Viewpoint enters the first section the
12:27one is gonna change as well so this is
12:29why we want to use the driver instead of
12:32page if we want it to be more flexible
12:35so for here we're going to select S1
12:37container and then we will click add a
12:40driver from container one
12:42let's go back to the earpods sequence
12:45and on the right hand side you can see
12:47there's a frame setting if you drag it
12:49then it starts to animate so what we
12:52will have to do is set a keyframe on the
12:54first and then set a keyframe on the
12:56last frame so for here I'm gonna start
12:59with a hundred because a hundred means
13:02that the viewport is fully 100 goes into
13:06this container already so we're gonna
13:08start from that and I want it to and I
13:11want this animation to be completed in a
13:14whole like 100 VH which is which is a
13:16whole page scroll so I'm going to go to
13:19200 and set um the current frame to 65.
13:24now as you can see in the website even
13:26though I'm scrolling my mouse but
13:28actually everything is changing but it's
13:30still fixed in the center so this is
13:32what I'm gonna do to my container as
13:34well select the S1 container at 100
13:37click on the pin and it will help you to
13:40and then go to the last frame which is
13:42200 and then say unfix what this means
13:46is that when between 100 and 200 every
13:49element is gonna follow the Viewpoint
13:52um but when it goes 200 the view is not
13:54fixed anymore and now we will set the
13:58phasing effect of the two small texts
14:01and then since I have set the group just
14:03now I will just start it and now I'm
14:06still starting from 140 and then I will
14:08put a keyframe and and now the opacity
14:12is 100 then I will drag to
14:16152 and then set the opacity to zero
14:21and now if you drive through you would
14:23see the text is starting to fade and
14:26next let's start to set the airport
14:27section titles animation
14:31I'm going to start as 145
14:37and then I'm going to go to 155 add
14:45and now I'm going to set the time size
14:48since I have the constraints I as I
14:51change the type size everything is going
14:53to just expand and it still says in the
14:54center and now I'm going to move forward
14:59and then I'm going to set the opacity at
15:03and what's after here is we see there's
15:06a text coming out called rebuild the
15:08sound of and I'm going to just type that
15:11out quickly the type size here I'm using
15:13is a hundred and ten and then spacing
15:17is negative three percent and I'm gonna
15:19give it a center as well
15:22I'm just gonna drag on the time frame to
15:25check which is the right spot for this
15:27text to come in and now I'm going to set
15:29the animation of this one and then let's
15:31start from 194 we will do this opacity
15:35at zero with the type size of 110 and
15:38now it comes to 204 it's a hundred
15:41uh with the type size of 115
15:45and then when it goes to 220 uh the
15:48opacity will be zero and type science
15:50will be the same one thing you might
15:52notice here is currently
15:55um the text is not really centered
15:57within because and then the earpods is
15:59going away it's because just now I set
16:01the fixed view to 200 keyframes that is
16:04for that point but now I realize this
16:06time frame is not long enough I want it
16:08to still be fixed when this text comes
16:10out so I'm just going to expand the time
16:13frame of the S1 container into around
16:15220 and then the next part of this
16:18animation we could see a paragraph and
16:20then there's a highlight
16:22uh the higher changes as we scroll and
16:25there's a background video as well
16:28so first I will just drag the video
16:29inside just click on the image and
16:32select the third Tab and then select the
16:34video you want and then you will see
16:36that here I'm setting it as 100 VW 100
16:45then and then I'm gonna create another
16:47container for section two which holds
16:51after checking back to this animation
16:54like how things are coming the timing
16:56thing my decision is to put the video
16:59with the first container since since the
17:03video comes right after the rebuild from
17:05the sound of and the paragraph is coming
17:08up after the text disappears so it will
17:11be great to just separate into another
17:13container which is section 2. so now I'm
17:16dragging in the video to The Container
17:21and then at 205 I'm gonna just set the
17:23keyframe and after go back into tool for
17:26I'm gonna set the view as false which
17:29means that it's not able to see at 204
17:31but when we go back to 205 you can see
17:34it and then this will all show all the
17:37way until 2 45 I'm just gonna add a
17:40keyframe at there as well to make sure
17:42that the container view is fixed to make
17:44sure that this is fixed with the
17:46viewport I'm just gonna expand the
17:48containers frame as well just as like
17:51what I did just now I'm just going to
17:52drag the last keyframe to two four five
17:54oops it should be 250 at 250 I'm gonna
17:58set the videos opacity as zero so
18:00there's a nice smooth uh gentle Fade Out
18:04and now I'm just going to copy the text
18:06from the website and let's just size it
18:08down to 56 with a zero spacing and then
18:12the line hash would be 56 as well
18:16and then to create this effect uh this
18:19like scrolling changing effect uh we
18:22would have to separate everything out
18:25like sentence by sentence so I'm just
18:27gonna copy everything out I actually did
18:30another bottom layer there
18:32is just for reference make sure that I'm
18:35putting the text in the correct place
18:36and then for some sentence if there's a
18:39short left behind you could separate
18:40into two sentences it's easier to align
18:44um I'm just gonna group them together in
18:48and then I'm just gonna start the
18:50constraints of the left and the top as
18:56and then for this container I would put
18:59it inside of container two and then give
19:03horizontal Center and then a vertical
19:07top this time because I want the
19:09animation to start right after it enters
19:16see after this rebuild from the sound
19:18off has disappeared this air plus pro
19:21comes right after so putting at the top
19:23would be a good place and we're gonna
19:25start this animation after this viewport
19:29is just entering since we want the
19:32animation to happen right when the
19:34container is coming inside of our view
19:36instead of like after
19:38the whole container is inside of the
19:40view so this time we're gonna add a
19:43driver from S2 container and we'll start
19:45from zero so for the first one I will
19:48start at zero and set the opacity of
19:51color as 100 and second at 30 100 as
19:55well the third one is 30 and the opacity
20:00and for a sentence two I'm gonna start
20:02as 30 with 15 percent
20:0540 was a hundred percent
20:08fifty a hundred percent sixty fifteen
20:17three I'm gonna start at 55 with 15
20:3574a is the similar pattern 80 15 90 100
20:544am 4B is the same group so we are just
20:57gonna copy the whole setting
21:05for 5A start at one zero five with
21:10and 115 is 100 it will not fade away so
21:14we're just going to stop here 5B is the
21:16same as 100 zero five fifteen percent
21:27close the background color as well
21:29so for here the animation part is done
21:32and then I'm going to set the nav bar as
21:35the fixed view as well you only need to
21:37set this in the like page scroll Y and
21:39now let's go and see how it works
21:44oops it seems that the video is
21:46disappearing too early so I'm gonna just
21:52and then I'm gonna set it to 400
21:55uh like when the video is disappearing
21:58and I would move the S1 containers and
22:01to 400 as well here's all for creating
22:05this beautiful animation inside door
22:07right and it's really easy so you could
22:09go try it right now and hopefully this
22:11tutorial is useful for you and let's see
