Build an Awwwards-winning Website on your First Try using React, TailwindCss, and GSAP

Are you afraid of the future as a front-end developer? There are so many

front-end developer? There are so many AI tools these day creating UIs in just minutes. It makes you wonder will AI

minutes. It makes you wonder will AI replace you? Will you lose your job? The

replace you? Will you lose your job? The

answer is no. These tools are impressive, sure, but they are nowhere near the level of an awards winning website.

Yes, that's exactly what we are building today. This is a brand new awards labor

today. This is a brand new awards labor cost you have been waiting for. In this

video we will build an actual award site of the day completely from scratch. No

templates, no shortcut, just clean detailed code explained step by step.

And here's a quick peak at what we are about to build together. We will start with a board headline reveal animation that every awards winning website use.

Later we will learn scroll power highlights leia parallax cinematic transitions and at next level testimonial section with pinning staggering and horizontal scrolling.

Everything in this project from scrolling to power legs to the cinematic transitions is only built by GEP. And in

this course I will walk you through every single line of code. You will

learn real skills writing clean reusable code and how to animate like a pro with gap. We will highlight GUP coolest

gap. We will highlight GUP coolest features and how to leverage them for award winning animations. By the end of this video, you won't know just how to

use Gab. You will know how to build an

use Gab. You will know how to build an awards level website. By the way, better than most developer out there. Please

quick shout out to Spit the site that inspired this build. If you haven't seen it yet, please go check their products out. I have also prepared a complete

out. I have also prepared a complete Figma design so you can follow along or rebuild it on your own. Of course, all of these are completely free. The links

are down there in the description. What

are you waiting for? So, let's build a future. If you are as excited as I'm

future. If you are as excited as I'm about bringing these awardwinning animations to life, here's what I need from you. Hit that like button,

from you. Hit that like button, subscribe for more insane builds, and please drop a comment telling me what you want to build next. All right, let's

got building.

All right, step number one. Let's get

our project up running using V and React. Super fast setup and we will be

React. Super fast setup and we will be coding in seconds. Open your terminal cd/

desktop and type npm create v at latest to install the v. You can

name it anything but I'm calling mine gab awards.

Okay. Choose react framework and uh javascript.

Now cd into the project and install our dependency.

Once it's done, let's open the folder in your code editor. I'm using VS Code here. Open your terminal.

here. Open your terminal.

Type npm rendev. We have got our Luca dev server app and running.

Now that we have got our project running, let's clean out the play code V gives us. We want a clean structure so

gives us. We want a clean structure so we can focus on what matters animations in our case. First delete the asset

folder. We won't need that react SVG.

folder. We won't need that react SVG.

Also delete app CSS since we are going to write our own custom styles.

Open our app.gsx.

Remove everything and type ref.

So we have already simplified our app.gsx and let's go to our index CSS

app.gsx and let's go to our index CSS and remove everything for now. Let's

also set up the folders we will be using. This will help keep things clean

using. This will help keep things clean as our layout grows. So go to our SRC folder and create a new folder called components.

Next folder would be sessions folder for different sections and the final folder would be constants folder

where our static digital will stay here.

Also in our public folder you can download the public folder from our GitHub repository. Also don't forget to

GitHub repository. Also don't forget to give stars. Okay. But I already have my

give stars. Okay. But I already have my public folder. So let me put here there

public folder. So let me put here there are different folders for fonts, images and videos in our public photo. This is

where we store static assets like background videos or typography files.

Awesome. Now we have got a clean react setup with a file structure ready for real development. Next we will install

real development. Next we will install TIN CSS and some essential dependency we will use throughout the build.

Let's start by installing TWIN CSS and it official V plug-in. This is a TIN CSS official website and you can click get

started. We are using V. So let's copy

started. We are using V. So let's copy this code.

Go to our terminal. Open a new terminal.

Paste it. Perfect. Let's go back to the website. The next step is you have to

website. The next step is you have to add the T CSS V plugin to our V configuration. So copy this, go to our

configuration. So copy this, go to our read config.gs

read config.gs and paste the tin CSS plug-in. And you

also have to add in here. So after

react, we will have tin CSS. This

replaces the old whole CSS setup. It's

cleaner and v native. Okay. So the next step is import tin CSS. Copy this in tin

CSS in our indust CSS. Add it here.

Perfect. So let's quickly test our tin CSS is working or not. Go to our app.gs

and give a border border red 500 and let's uh let's get a bigger font size. Okay.

Go to our browser and everything is working. If you see this one tin CSS is

working. If you see this one tin CSS is set up and working perfectly. So let's

go to our indust CSS file pack. So for

the more CSS file and uh installing fonts and much much more you have to take our in CSS file from the GitHub

repository or from our readme snippad.

Okay. So let me paste it here. Perfect.

It is a really simple CSS and uh you can also do it. These are some basic but let me explain what is happening in our setup. Okay. So we are importing the

setup. Okay. So we are importing the Antonio phone from Google fonts here.

This will be our main display font.

Below that we are importing tailwind itself. This give up access to all the

itself. This give up access to all the utility classes tailwind provides and a custom font base. So this is a proxima

manov and sensory for our um paragraph font. So we load our custom font from

font. So we load our custom font from the public fonts folder and we will use this as our paragraph form throughout the site.

Then variable using thing. This thing

block is where I defy all the custom colors and fonts we will use across the site. Instead of hard coding hex values

site. Instead of hard coding hex values everywhere, we can now use sematic names like text mick or text yellow or bora

mick or bora yellow or font sense. It

keeps the design system clean and consistent. And there are some base

consistent. And there are some base styles for HTML and body. These are

global based styles, a CSS reset, margin zero, padding zero, and a default font family. And we remove all default

family. And we remove all default spacing. Set a background color base

spacing. Set a background color base font and hide the scroll bar for clean visuals.

There are custom utility classes using twoin utility feature. Instead of

repeating fl justifying center item center 20 times I just flash center. So

this is my way. You will notice I also created semantic utilities like general title absolute center something like

that. These are really useful and easy

that. These are really useful and easy to use. Now this is where things get

to use. Now this is where things get powerful. In the layer components block,

powerful. In the layer components block, I define actual section structures like hero container, flavor section, footer section and more. Each one contains

nested elements like hero title or hero button with reusable tailwind utilities back in. These are also cling to

back in. These are also cling to organize. You see something like this

organize. You see something like this everything is in each their own section.

So there is no complex and complicated CSS anymore. This approach give us the

CSS anymore. This approach give us the best of both wars utility first CSS and semantic class structure. And finally

and finally here's a basic CSS animation for rotating an element infinitely.

Okay. So instead of stuffing all over tan CSS classes directly in GSAs, we are organizing things in a way that's easy

to reuse, update, and understand. This

structure will save you so much time as the site grows. Now that the CSS is ready, let's move on to installing our

animation engine, GAP.

Okay, so now time for GAP and it is really exciting news because Gab is now free for everyone thanks to Webflow support. So we can now use all the Gab

support. So we can now use all the Gab paid plugins. It's really exciting and

paid plugins. It's really exciting and amazing for all the front-end developers. Okay, let's go back to our

developers. Okay, let's go back to our project. Open your terminal. Clean

project. Open your terminal. Clean

everything. npm

install gap and at gap react.

The last one is react responsive.

We are installing gap which powers all our scroll animations and timeline choreography. Then gap react which give

choreography. Then gap react which give us easy hooks like use gap that work great in functional components react.

Believe me, this is a really lifaver for the riad user. And finally, we will add ri responsive. This will help us write

ri responsive. This will help us write clean and responsive conditions in our GSX. Super useful for custom break

GSX. Super useful for custom break points or layout shift that cannot be possible only by CSS.

So all of the installation and setup is finished. Let's quickly jump into the

finished. Let's quickly jump into the coding. The first component would be the

coding. The first component would be the navbar component.

Let's create our navbar component inside the components folder s component folder and the first file

would be navbar dot gsx type ref and we will get our navbar yes so in our

app dot gsx remove everything and type main and let's import our nav bar here.

Let's go back to our browser. And here

you can see uh with the help of our D for CSS background and the D for font family, we already get things differently. Okay, this is our navbar.

differently. Okay, this is our navbar.

Let's create a simple nfbar component fix to the top of the screen so it stills visible while scrolling. Go to

our navbar component. remove everything

and write nav tag. Inside this nav there will be only one element which is called image. Okay. So you can see in the

image. Okay. So you can see in the public folder in the images folder we have our nav logo SVG. You can also copy

like this and paste it here. Remove

public. This is for nav logo. Let's go

back to our browser and we have got our logo. Okay, let's give some styling.

logo. Okay, let's give some styling.

We will get fix and top zero, left zero, set index into the 50 to make sure it

stays above everything else. Then we get it responsive padding n but for mobile it is only padding three.

Let's also give some styling to our images. Just for only size for the

images. Just for only size for the median and above it will be around width 24 but for the mobile it will be around

with 20. Perfect. So that's our minimal

with 20. Perfect. So that's our minimal clean navbar component. Pretty easy. We

don't do anything crazy things in here.

But let's remove react. Perfect. And

this is our navbar.

So the next exciting thing is our hero section.

Let's create our hero section component inside the src sessions folder. Go to

our section folder and create hero section. GSX file. Type R EFC.

section. GSX file. Type R EFC.

And we got our hero section component.

remove react import because we won't need it. Okay, remove everything and

need it. Okay, remove everything and write section tag. Okay,

let's start our section component and then we will give some classes which is called bg main bg. We will get a black

color inside our section. We will have a complete parent container for everything that will be included in the hero

section such as hero titles and clip art animations, a CTA button and so on. So

let's create and give the class name to hero container that we have already define in our CSS file.

Let's go back to our app.gsx GSX and import your section to see what is happening in our browser. Okay. So let's

go back to our project and yeah nothing's crazy happened because we have not add any content yet. So the first thing that we will be add before

everything else let's uh quickly check what is hero container in our in our indust CSS. Okay, just simple. We give a

indust CSS. Okay, just simple. We give a position relative. We give some

position relative. We give some background and with height and overflow here. That's it. So, let's go back to

here. That's it. So, let's go back to our hero section. Let's quickly add our image.

I don't want to type. So, let me find which image that we will be use. It is a hero img. So, copy it and paste it here. Of

img. So, copy it and paste it here. Of

course, remove public. And if you want to give you can give and class name should be I don't want to give a predefined class name in here because I

want to show you guys what is happening in a really detail. Okay. So let's give a position absolute and bottom

zero left is half and minus translate x is half. Uh

this is the way we center the things that has a position absolute and object is auto. Okay. And then we will have our

is auto. Okay. And then we will have our scale is 100 but in the tablet we will have the scale 150 a little bit bigger

than its normal size to to give it more visual impact. We are keeping this

visual impact. We are keeping this symbol for now just an image. We will

replace this with a video later when we add scroll animations.

Let's go to our Yes. And we have this.

Okay. Cool. Now let's add the content container below our image. Create

another div.

Give a class to hero content. Everything

inside here the headline text button we will make a reveal animation that almost every award winning website use in the

later. Okay. Inside our hero content,

later. Okay. Inside our hero content, let's give another div that will have overflow hidden.

Inside it there is our main headline freaking delicious.

And let's give the class name to hero title.

So we wrap the headline in an overflow hidden div. This is really important

hidden div. This is really important because we are going to animate it with split test later. Okay. And the hero

title class is already sty in our CSS.

Let's quickly through what does it mean. So this is a hero title. Uh we already applying the

hero title. Uh we already applying the test color and some responsive font size

and phone bold uppercase and uh line height, letter spacing and some margin.

Okay, these are really basic stuff you guys can also do. So I won't go through really deeply. Let's go back to our hero

really deeply. Let's go back to our hero section. GSAs and let's check what is

section. GSAs and let's check what is happening on our website. It's freaking

delicious and the font is really cool.

Okay, let's go to the next one. The next

one is one of the most important features that website has and I took a

time to create this effect. Let's write

diiv and class name is hero task scroll.

This part is for our reveal task animation. We will apply a clip part.

animation. We will apply a clip part.

Okay. So

let's give some slide and we will have clip up. But here we won't do copy paste

clip up. But here we won't do copy paste from somewhere without understanding. We

will go through what is clip art and how you can easily copy the code with understanding. Okay. So, let's go to the

understanding. Okay. So, let's go to the clip B website.

This one CSS clip art maker. Here there

are so many default uh clip wines that you can already use. But in our case, we will have this one. Let's completely do

this everything.

Okay. Uh so this is a full full point that will take a shape of a full square and we want to one at something like this. Okay. So currently right now

this. Okay. So currently right now everything is uh all the four points are here.

All the four points are exactly at the center of everything. Okay. I am not currently right now I don't got the center but you get the idea. And we will

do the reveal animation.

These two go these two points go like this. And these two point will go like this. This is kind of reveal animation. You can take a look this

animation. You can take a look this point. Okay. If you want to take this

point. Okay. If you want to take this point into the half of the squirrel, you have to change this one. Not 48, it is

uh 50%. And if you want to take this

uh 50%. And if you want to take this point into the center, you have to change this one. And if you want to change, you have to change this point.

And if you want to change, you have to change this point. Right? So we got something like this. 490 480 4600 and

45,500. In our cases, it should be 50

45,500. In our cases, it should be 50 because right now it is not too accurate. I'm not too accurate to place

accurate. I'm not too accurate to place a dot that exactly center point. So the

center point is 50% of course. So we

want the reveal animation that start from the center into the sides. So we

will get our clip value 50 5000 5000. That's it. That's a power of clip

5000. That's it. That's a power of clip art. You don't have to memorize it and

art. You don't have to memorize it and you don't have to copy anymore without understanding in the near future. Okay.

So right now let's copy this one. Yeah.

Uh you only have to copy this one. Let's

paste it in here. Instead of 49, we will have 50. This is also 50.

have 50. This is also 50.

50. So currently our clip art lines are all in the center. So we cannot see the inside element at all. This is the

secret source that every awards winning website use. Okay. So let's add a H1 tag

website use. Okay. So let's add a H1 tag and diabet container and there will be an H1 which is called protein plus

cuffing.

Perfect. And let's give hero subtitle and go back to our website. You won't

see anything. Yes, anything at all because of our clip art value. Let's

close it. Here we go. This is the exact same feature that's built website use.

Okay. So let me go through our indust CSS file to see what is happening. Here

at test scroll here we rotate a little bit and let's give a little bit margin bottom. This is

a border and border color to get this effect. Okay. Here subtitle is literally

effect. Okay. Here subtitle is literally simple. Let's give a background for it.

simple. Let's give a background for it.

Inside this H1, most of it are responsive font size and font b uh test color uppercase and some predefined like

letter spacing, line height, padding.

Yeah, different padding setting for the responsive.

Okay, so let's go back to our hero section. And if you uncomment it, you

section. And if you uncomment it, you won't see it. But let me tweak some of value in here. Let's go to our clippy

website. And you can do like this. Not

website. And you can do like this. Not

this one. This point please. So it would be around like 0 0 right? Not 50% 50% is

0 0. So let's quickly take zero in here

0 0. So let's quickly take zero in here instead of 50%. Let's see the exact same visual that we got our color website.

Okay. So currently right now 50% 50% and these two are zero and we got the first half of the image it is the same we got the first half of the H1

text and if you do something like this so it is 100% at the last value right okay so let's give a 100% and take a

look we got the same visual here okay so I think you are now pretty understand how you can use clipod value in your

project on your own. Perfect. Let's go

back to our original value and later we will animate this with this sub to reveal from the center outward. Perfect.

So we will have our last element the subtitle and call to action button.

After this DIV we will include the H2.

This is a subtitle. Nothing crazy

happening. So you can copy uh from our Figma file and paste it here. Perfect.

Let's go to our project and here you can see there is a text. There is a subtitle. So after that we will give a

subtitle. So after that we will give a CDA button for it. The class name is hero button. There will be a P tech and

hero button. There will be a P tech and check a spilt.

Let's check it out. That's it. This is a check a spilt. Now we add a short marketing subtitle and although it is not animated for now but uh we will

animate it later with our gub and finally the call to action button will be here. Okay, instead of this image

be here. Okay, instead of this image let's use another one which is called I think uh static image.png. Rename, copy

and here let's replace it. Okay. And

later on we will replace with a video but for now I think this uh distracted image is not anymore. Great. All right

we have already learned what we need. So

let's go back to our project and let's start to animate our title.

Here we will use use gap.

What is use gap? Use gap is a custom react hook that makes it easy to run gap animations when a component maps. Before

use gap, we have to manually clean with gab context by using use effect. You

have to clean manually. You have to revert the twin manually manually much much going on and it is really

maxi.

But after the use gub hook it is much simpler and easier than before. So it is a lifaver for us.

Our all gub animation will be coded here. So this mean as soon as this

here. So this mean as soon as this component is ready run these animations is part of the gap react plug-in which

is optimized for working with react. It

makes sure your animations run smoothly and don't break Riad's virtual dome.

Think of it like use effect but designed specifically for the GUP life cycle.

Okay. So let's start to animate it.

Let's take a look what our final animation would be.

So okay, we will start to animate this freaking delicious tax.

constant title split equal to split

text from the gap or dot create the target is our hero title this one

and type we have to do the vast object and type

is chars. So that is a characters. Uh if

is chars. So that is a characters. Uh if

we want to animate wars, uh instead of charge, we can do wars something like that. Okay, I will explain more here.

that. Okay, I will explain more here.

What is split text? Split test is a plug-in from Gab that lets you take any block of test and break it down into

smaller parts like words, lines or individual characters.

This is super useful for creating dynamic detailed text animation. For

example, instead of animating an entire paragraph at once, you can animate each wars separately or make each letters appear one by one for a dynamic

cinematic effect. Something in our

cinematic effect. Something in our website like that. Okay.

So, let's go back to our project and continue on our animation.

Next, create a GUP timeline for the initial load animations.

We will add a slight delay for dramatic effect. Okay. So, for 1 second, then we

effect. Okay. So, for 1 second, then we will use our timeline dot two.

The first thing we will animate is our hero content.

A wall container. This wall container, our title, clip art, subtitle, and a CTA button. All included container. So this

button. All included container. So this

is a vase object.

The animation instruction that I want to give is opacity one. So fade in the

content and please side up y equal to zero to its final posction for the easing.

Let me give power one in out. So that

means smooth in and out motion. Perfect.

Let's see our animation.

Gub is not defined. Sorry. So let's

import our gub from the gub library.

Perfect. remove everything and here our wine is working but to walk opposite one this is a to animation not from animation so we have to define our

initial start okay so in the hero content let's give opacity zero and we got exactly what we want perfect next we

will reveal the test block with a clip animation let's say our original website and reload. This make it look like the

and reload. This make it look like the task is sliding open from the center.

Right, we want to get this reveal task block clip animation. Okay, so it looks like the task scroll is sliding open

from the center, right? So let's go back to our project.

Write another two. Our target would be hero text crow for the vase object.

This time I want to make the duration one. The default is 0.5. But this time

one. The default is 0.5. But this time the duration is a little bit longer than the default. Okay.

the default. Okay.

The animation value that clip art value.

Let's copy from the clippy website.

Go to the clippy. And this is our final position.

Copy the value and paste it here. But be

careful there is no and percent in the zero value in here. So let's give percent in this. Okay. The last one is easing.

For this one I want to use a suck out.

So it kind of look like a pop. Perfect.

And let's go back to our see what is happening. Yes. Perfect. So this

happening. Yes. Perfect. So this

animation is come from the center to the different edges like a reveal. Okay.

Like a reveal animation. Let's refresh

it one more time. Yes. But right now the animation is happening one after another. Right. First one is up and the

another. Right. First one is up and the second one is reveal. I want to make sure this reveal animation happens a little bit earlier.

than the original sequence.

So let's use position parameter in our second two twin about around minus equal 0.5.

The theory is this one lasts for 0.5 second because we do not define a duration in here. Right? So the default duration is 0.5. So this one less allow

for 0.5. Our animations happen after

for 0.5. Our animations happen after that 0.5.

But this overlap animation slightly with the previous one for a smooth flow. So

it's kind of these two start at the same point. Let's see what I am talking

point. Let's see what I am talking about. Refresh it. Yes, you know up and

about. Refresh it. Yes, you know up and open happens at the same time. Perfect.

I love it. Okay. Finally, we will animate each character of that hero title.

They will rise up from below for a powerful premium feel. These kind of animation every almost our website use and how easy it is. I will show you

guys. So, let's go back to our project

guys. So, let's go back to our project again. Remove the semicolon. But this

again. Remove the semicolon. But this

time instead of dot to we will use dot from because it will go from below.

Right? For the target we will use our title split and we will use chars not words not

lines. We want to animate each

lines. We want to animate each character. So this is a chars for the v

character. So this is a chars for the v object. I want to do y person 200.

object. I want to do y person 200.

So each letter starts 200% below its finest part and we will use a some ster

value is only for 0.02. So it is a quick ster between each letter for making kind of a wave effect

and okay we will do the ease for the power to dot out. So for the easing they are not uh strictly

restricted. You can use any ease you

restricted. You can use any ease you like. Okay let's go back to our project

like. Okay let's go back to our project and see what these freaking delicious will be.

It's so cool right? Uh if you do not make this stagger you can see boom so everything goes up at the same

time but if we give stagger we give each letter animation a little bit time difference so something like this

okay so this is a really quick sticker how about I want to give 0x 5 second to each letter

uh E A K something like this. Okay. So

for our case we have to get a quickly sticker.

Perfect. Uh as also I want to get an overlapping animation to get a much like similar look.

Yes. So this will happen after this finish. Okay.

finish. Okay.

Perfect. Now we can already say that our hero animation is finished. Let's go to our original website and see.

Yes, instead of a video uh the all of the animation is finished. When we

scroll this container, you can see this container a little bit rotate and I think it will be a little bit scale

down. So yes, this will be our next

down. So yes, this will be our next target. Now let's add that rotation and

target. Now let's add that rotation and scale effect as the user screw. Create a

new timeline for it.

Constant hero TL. TL stand for timeline.

hero TL. TL stand for timeline.

Dept timeline.

Here in our V object I want to make magic happen. Okay. So this depend on our

happen. Okay. So this depend on our scroll right. This depend on the user

scroll right. This depend on the user scroll. That means we have to use gap

scroll. That means we have to use gap another magic plugin which is called scroll trigger. What is scroll trigger?

scroll trigger. What is scroll trigger?

Scroll trigger is a gap plugin that connects animation to your scroll position instead of animation just

playing when the page loads. So score

trigger lets you start an animation when a starting element enter the viewport or ping an element. So easy it stay

fixed during scroll and tie animation progress directly to the scroll position like scrapping.

It makes user control animations just by scrolling. Okay, that is scroll trigger

scrolling. Okay, that is scroll trigger and this is really one of the most important plug-in that gap offers. Let's

go back to our code and write scroll trigger.

The trigger thing is dot hero container. I want to include everything in our hero section. So this

will be the hero container. We are

trying to make that rotation effort for the whole container itself. And we will give start

position around 1% and top. What does it mean? It

means start right when the top of the hero container hits at the top of the viewport. Okay. To see this one, we can

viewport. Okay. To see this one, we can do like this. Markers

true. Let's see.

Okay, nothing happened. That means we forgot a really important step, which is to use this school trigger plug-in, we

have to register. Okay, so go to our app.gsa

app.gsa and type tub.register plugin.

Inside it we will have our scroll trigger from GSAP.

Perfect. We have to do only once whenever we register parking in our project just only once. Okay. That means

uh we can use code trigger in everywhere inside our project. Perfect. Go back to our hero section and make sure it is marker is true. And let's go to our

project again and refresh it.

GUB is not a file. Sorry, why gub is not a in our app. GSA gap is not a fine.

Sorry guys, remove react. I think now it will works

remove react. I think now it will works perfectly.

Yes, this what we want. Now we set the mark as true and the start position is one person and top. Let me show you what

is happening. This top is mark the

is happening. This top is mark the viewport. But this is our 1%.

viewport. But this is our 1%.

1% from the top of the hero container.

How about 10% refresh? So 10% from the top of our hero container. Okay, this

only for the view port. So scroll start to means here. How about change to the center?

Refresh it. It will goes to here. View

port 50% from the view port topped.

Okay. How about like 80% for the first one? That means 80%

one? That means 80% from the top of our hero container. Hero

container is a view port uh high 100 deviation height, right? So it start from here. This also start from here but

from here. This also start from here but this one is for the our hero container and this one is for the viewport. Okay,

perfect. So let's go back to the one person and top.

Let's define our end value bottom

om and top om and top. That means the whole animation will end when this end

value hit this scroller end. Okay. So

this one will hit this top and then the whole animation will be end. Let's give

another one scrap to true.

This ties the animation directly to the scroll position. Okay, we don't have to

scroll position. Okay, we don't have to uh calculate the scroll position manually. Just give scrap equal to true

manually. Just give scrap equal to true and this whole animation will be synced to the scroll position

to see this one. Now our website is only has 100 dvh we cannot scroll. So let's

give a fake space. Okay. So after the hero

section do one div class name hdvh.

Give some border red 500.

Here we have our extra space. And then

we can make scroll some hero tail animation inside the timeline. We will rotate and scroll scale the hero container. So it

is a two animation.

The target is T container and in the V object

subtop rotate to add D around seven and slightly shrink for a dynamic pooling effect.

Also sliding down a little bit to add movement. Finally

movement. Finally smooth motion for the in and out effect.

Let's go reload this. And now there is no rotation happening. But when this start value hits the scroll, do you see

that? We got it. We got the rotation and

that? We got it. We got the rotation and scale a little bit down a fat. And when

you hit that end, there is no more animation happening. So this is a ending

animation happening. So this is a ending for our animation. And we don't have to make sure like okay rotate this person in around this scroll position. Rotate

this person around in scroll this scroll position. We don't have to do that

position. We don't have to do that because of our scrap equal to true. So,

as you can see, school trigger is one of the most powerful tools in Gab for making modern interactive web experiences. Don't worry, it it's just

experiences. Don't worry, it it's just only overflow hidden. So, the main focus is our animations

in here. Perfect. The hero animation is

in here. Perfect. The hero animation is complete. Let's also remove our markers.

complete. Let's also remove our markers.

And next one, we will do this.

highlight picture.

Okay. So let's go to the second session.

We are going to create this core scene highlight test feature also this paragraph reveal animation. In

our project go to the SRZ and session folder. Here we will create

folder. Here we will create message session.gsx. GS6 type refce

message session.gsx. GS6 type refce before our fake DIV. We will add our message session in here. Okay, you can

already see this is our message session.

Let's remove everything and replace with section. This is a main session that

section. This is a main session that wraps everything. We will animate test

wraps everything. We will animate test inside this session based on the scroll position. Here

position. Here our class name is message content. Let's

take this and go to in the CSS see what is happening in our message content. As

usual we will give some background color some test color and minimum height is 100 overflow everything mix to sure

center and position relative. Make sure

that Z intent is 20 so that our message content layer is above on the hero content layer.

Great. Let's see. You can see this is above this. So we don't see any ugly or

above this. So we don't see any ugly or extra space anymore. So inside this

section we will have a div.

Let's give a container from tin CSS and MX auto to set the center inside

everything it center. So FL center and let's give some padding and position is relative.

FL center is a custom utility to center everything inside. We have already

everything inside. We have already defined like this right. So we don't have to write plus just to find center item center

in here just center and we already make center inside this we will have with

full height full it holds the entire message block. So this is MSG

message block. So this is MSG rubber inside it we will have our H1

tag. Let's copy stir up your fearless

tag. Let's copy stir up your fearless pass. You can also copy from our Figma

pass. You can also copy from our Figma file and let's give a class name which is

called fast message. After that we will have our clipot div.

This is the message test scroll. It is

the same as our hero touch scroll. So

nothing crazy happening here.

And this div will reveal as you scroll using GF clip part animation as we have done before for our hero part. Let's

give some styling to it. Nothing crazy.

It just only BG light brown and responsive padding mobile is for both.

The last one is our H2 tag which is called your app. And let's also give

test dash reddish brow to our H2 tag.

Perfect. So after this clip part value, let's go to the second headline H1.

The message is second me s. Second

message. Let's go copy from here and paste it in here.

Thank you. So after everything we will have our paragraph at the bottom right.

This div next div is for the paragraph.

Do we make sure everything is center? We

will use plus dash center and sum responsive margin top. So for the mobile it just only margin 10. Inside this div

we will add a rubber div for the P tag.

Okay it is maximum width is MD. Let's

give some padding X and flash dash center overflow

hidden. This is our P tech. Copy from

hidden. This is our P tech. Copy from

here and paste it. So let's check what is happening in our browser. Great. We

got what we want. This is a first message, second message, the value and a descriptive paragraph at the bottom.

You can also check in the index. CSS.

This will be our message content related stuff. At first we give background and

stuff. At first we give background and for the wrapper we set uh different font size. So

response is a font size font bool uppercase and some default letter spacing uh line height setting to make sure everything is center in the

vertically and some responsive gap.

Okay, this is the first message color and font size. This is a second message color and the maximum width value. So

this is a P tag everything central font paragraph is our proxima no sensoric font and for the H1 H2 I don't want to

get the line height so it's leading none and for the MSG test screw we will rotate a little bit and we will move the

uh test scroll a little bit down but this is kind of responsive okay for the mobile we will make a little bit up And of course this is absolute and Z 10. And

let's give some border. So we got this look.

All right. Let's bring this message section to life with some gap magic.

Before that, let me combine the screen.

Right now I'm going uh from this to this. So it's really not good. Okay. I

this. So it's really not good. Okay. I

think this one is much better because you can also see here and here. Perfect.

All right, let's bring this message section to life with some DUP magic. We

are going to animate the headlines and paragraph as you scroll creating a premium kinetic field. First, we are using G sub hook.

That's our playground for all the animations.

The first thing that we want to do is we want to use split text for splitting WS.

Okay. For our first message, second message, we want to split constant first

message. You can also use like msg split

message. You can also use like msg split and split task from gap dot create.

The target value is our first first message and the bus object

the hero session we make characters but here I want to animate the words so it's wds words we are splitting only by words

here let's do the same approach for the second message split it is second now for the paragraph Raph at the bottom is

a little bit different but let's copy and paste. Give it a name

and paste. Give it a name paragraph split. Okay. So there is only

paragraph split. Okay. So there is only one P. So we can select like this

one P. So we can select like this message content and P. So a P all the P tag inside of this message content. But

in our case there is only one P.

So this is another way of gub target.

You can also do like this. But for the tie here, not only walls, I also want to

animate lines. So that these animate

animate lines. So that these animate these are animated lines by lines. Okay.

And we are adding a custom class for each line. This will help us target line

each line. This will help us target line specifically in our CSS if we want. And

the class name is paragraph dash line.

Let's take a look what paragraph line in our index CSS. What does it work? It's

text no and overflow hidden. This mean

let's give some a border. Refresh

everything. You can see it. This is line by line and this is a paragraph line class for each line. Overflocated mean

everything will come out from here.

Okay, let's start to animate. Here we

are using the gub.

First message split dot words in color from the opacity

50% or around something like that to yeah let's go to the message content. As

you can see right the original value is around 10%.

But we will we want to do a full color.

So let's copy this value and paste it here. So each word fix to this like

here. So each word fix to this like green color for the easing I want to

give power one dot in and the ster is around one. The ster

means each word will animate one second after the previous one.

Refresh it. I think this is not fine.

Yes, I'm right. Okay. So, let's refresh it.

You can see this is happening one by one, right? But we have to make

one, right? But we have to make the scroll trigger animation so that this animation will happen when the

scroll is arrived.

Let's add scroll trigger.

Our trigger target is message content.

We are triggering this animation when we scroll to the message content. Okay,

this animation will happen when the message content is arrived or something like this.

And then let's give some start value for it. It is topped and center to see what

it. It is topped and center to see what is happening. Let's give markers equal

is happening. Let's give markers equal to true.

Refresh it. So this is the top of the message content and this is the center of the viewport. Okay. So

let me refresh from here and see the animation is not happening yet. But when

we hit that scroll status value the animation happens one by one. Perfect.

So because is one right but it is not scrolling yet. To make sure the

scrolling yet. To make sure the animation is crossing, let's give scrap to true.

Let's make the animation scrap align with the scroll position. Let me refresh here. And the hit the scroller start.

here. And the hit the scroller start.

And when you scroll, yes, you see when you scroll up and down,

you can control your highlight animation. But right now, it is not

animation. But right now, it is not really great, right? Because if we have already

great, right? Because if we have already scroll uh to the touch session but the

animation is not finished yet because the original and the default scroll end is the end of the container. So the

animation will finish when this end value were hit.

We have to define our end value.

Let's give 30% from the top of the container and center at the viewport.

Let's refresh it. You can see animations happen quickly because scroller end value is here. It start from here

because of scrapping value true. We got

the scroll position scrolling animation and one hit here. The animation is already finished. You see that it is

already finished. You see that it is really really easy. So let's go for the second animation. The second animation

second animation. The second animation is also the same. Copy a whole thing and paste it. But instead of bus message

split, we will do the second message split. Everything is perfect. But

split. Everything is perfect. But

instead of trigger value is message content. Right now we will trigger

content. Right now we will trigger second message. Let's see. Okay. Remove

second message. Let's see. Okay. Remove

this mark as true because that animation is already finished in our case. Let's

see.

You know, so if we trigger the message content, we will get the markers in here. But instead of it, we trigger the

here. But instead of it, we trigger the second message. So our marker start from

second message. So our marker start from here. The start point is the top of this

here. The start point is the top of this second message container for the viewport. It is a center but right now it is finished really super

quickly and I don't like it because it's kind of like uh flash or something. I

want kind of a little bit slow and luxury vibe. So instead of giving a

luxury vibe. So instead of giving a ending 30% let's give a bottom center.

Let's quickly refresh it. So it start from the start of the message second message container and it will end the

end of the second message container.

Let's see when you hit start value you you will get the animation happening and when you hit end you will get the

animations and okay perfect.

Let's remove this marker value. Next, we

are creating a reveal animation for this message task crow element. So for this one, we will use a timeline

to keep it organized. Let's use a reveal timeline using gap timeline.

And inside a bus object, we will start at nearly 1 second. Of course, we will add a score trigger. Trigger target is

dot msg tax scroll. Okay, dot. Don't you

forot that dot and starting value is top. Let's give top.

is top. Let's give top.

Let's see. Marcus

true. Refresh here. So this is our message text scroll height right so at the top and at the bottom this is a double and we got we want to get this

scroller that is at the top perfect now let's really add our reveal t2 the target is msg let me copy I don't

want to type it and the v object inside is duration is one. So this reveal will

take 1 second. And as usual, we will animate our clip value.

Okay, this will be the final shape fully visible. And let's add some psych in

visible. And let's add some psych in out. So this evening give a little bit

out. So this evening give a little bit secular smooth transition.

Okay. So

we have to define our clip art value. Do

you remember that we left empty in here?

So sty and give clipat. But before

giving any value. So before copying any clip of the value, let's go to our original website and see which direction

animation is happening. You see it's sliding from the left to the right. is

sliding from the left to the right. Our

first one is sliding from the center.

So, it's revealing from the center, center to left, center to right, happening at the same time. But for this one is sliding from left to right. So,

let's go to our clippy website.

And of course, this will be our final value. So, let's copy this final value

value. So, let's copy this final value in here. Don't forget to add person on

in here. Don't forget to add person on it.

But for the starting value, this time it doesn't start from the center. It needs

to start from the left. This is a value that we have to get. Copy it. Paste it

here. Perfect. Let's see our project.

So right now the scroller start is really far from here. I want to make animation happen around this. So not at

this. Let's fix it. Instead of top

this. Let's fix it. Instead of top position, we will add 60% from the top.

Refresh it. And you can see not happen.

But when we hit it, we got our animation. Okay. And perfect.

Everything is good. We got a highlight scrolling feature. And we got this clip

scrolling feature. And we got this clip part animation feature. So the last thing that we have to do in this message

session is animate our paragraph. It is

really easy. But let's create our paragraph timeline.

GS top timeline inside it.

Of course it will also happen due to the scroll position. So we have to add

scroll position. So we have to add scroll trigger. Our trigger moment is

scroll trigger. Our trigger moment is this one message content P. This is our trigger. Let's give some markers equal

trigger. Let's give some markers equal to true and start is

okay and start is top center. So when we hit this one and this will be in the center scroller start value will be here. When we hit like that this

here. When we hit like that this animation will happen. Okay. Paragraph

TL.2

we are doing kind of reveal animation.

So from paragraph split dot what? And for the V object

by pressing 300 each word starts 300 below its final position plus rotate a little bit.

So each word has a slight 3deree rotation.

For the easing power one dot in out this easing is really really smooth. I really love it

for all the duration is 1 second and the st value is 0.01. So it happens really quickly. Okay. Let's save it and refresh

quickly. Okay. Let's save it and refresh it here. Okay. Oh, remove our reveal

it here. Okay. Oh, remove our reveal marker so that we only have one marker here. Perfect.

here. Perfect.

And we got our reveal animation. And

here you see. Yeah, it's really great when we hit.

So each line in words are slightly rotate reveal animation. Perfect.

Now, here's what I want to explain very much. That thing is fake horizontal

much. That thing is fake horizontal scrolling. So, instead of the usual up

scrolling. So, instead of the usual up and down, we are faking that sideways motion with Gab score trigger ping and

Xaxis animations.

It's fully smooth. So, let's see it in the action. Close everything.

the action. Close everything.

Go to our section folder. Create

flavor section GSA file.

Type ref import and let's replace with the section tag.

This section is the main repar for our flavor showcase.

Let's give some class name which is called flavor section.

To see it in our browser, go to the app.gs before a fake DIV

app.gs before a fake DIV add flavor section and close it. And you

can see this is our flavor section.

Okay. Go to the in the CSS. In the

flavor section CSS is pretty simple.

Let's give a height 100 dvi and background is make color.

Great. Inside the session, we will have another div and this will be the wrapper for everything. Title and our fake

for everything. Title and our fake horizontal scrolling section. Okay,

let's give a class name is H-4.

uh the display is flash but for the laptop devices and beyond we will get plus dash rule so the direction is rule

but for the mobile devices and tablet devices we will get plus dash call item center in every devices position is

relative inside this div we are going to have two div the first one is for the title

And the next one is for the slider section.

Great.

So for the title, it takes up to 57% on the large screen and flash dash none so that it won't shrink or stretch in

many devices. Let's give some fixed

many devices. Let's give some fixed height H-80.

But for the large screens, we will get full height.

Finally, we will add some responsive margin top value MD MT-20 and much much larger screen MT it's

zero. Great.

zero. Great.

Inside it we will have our title.

But for the title let's create a new component file which is called flavor title.jsx.

flavor title.jsx.

Type ref import react and add flavor title. In

here you can see this is a flavor title component because this is a toplet screen size.

Our flex direction is colon. So the

title will be here and the slider part will be here. Okay let's do the next one is for we will take full height. So it

will expand to take up remaining space in the flask container. Here we will also create another component which is called

flavor slider. GSX type ref

flavor slider. GSX type ref remove import and let's import flavor

slider in here by okay so this is a flavor title this is a tablet side so colon direction is

working flavor title flavor slider perfect let's go to the flavor title component so in our flavor title

This is our main title container for the flavor section. Let's skip some styling

flavor section. Let's skip some styling for it.

We will add general title from our indust CSS that we define for much easier process. Okay.

And call center. Call center is my own

call center. Call center is my own utility to win CSS classes. Take a look.

It is plus display fl and plus direction column and just define center item center. So everything is center in

center. So everything is center in vertically. Okay,

vertically. Okay, let's take full height here. You can

already see things are changed and let's add some responsive gap for the larger

screen. we will have gap dash 32 and for

screen. we will have gap dash 32 and for XL we will have gap dash2

for def gap d-24 and for the def we will get gap d-16 great remove flavor title

so in our flavor title component and in our main title container we will have our H1

which is we have six the thing uh we are doing this effect okay we have six freaking delicious flavors you see this

it is actually already the same as like this but the thing different is this will not be position absolute anymore

okay as usual we will wrap with a overflow hidden diag back and we will give some responsive

padding py but for the mobile is three.

Let's give a custom class name for our first h1 tag. So this should be fast dash test dash split. Great. Let's do

the clipping part is the same as the message section. You can also copy it

message section. You can also copy it but I do encourage you to write with me together. Repetition is also important

together. Repetition is also important in our process of learning. Okay. So

let's do a container for the clip path.

As usual we will have a sky and here we will include clip path but for now just

leave and empty. For the class name here would be flavor test scroll. Inside it

we will add and di2.

So h2 tag which is called freaking king.

Let's give task dash make. So uh our test got a make color. For the background we will

make color. For the background we will do bg dash mid dash brown.

Let's give some padding bottom equal to five.

Let's give some padding top zero but for mobile is three. Okay. And for the

larger devices we will have px dash 5 but for the default is three.

Great. We got a really cool and goodlooking clip path moment.

Let's do the last title.

After that clip art diag.

The content is delicious flavors.

As usual, we will do the overflow hidden. Let's give some responsive

hidden. Let's give some responsive petting. Py should be zero at the larger

petting. Py should be zero at the larger devices. But for the mobile and

devices. But for the mobile and template, we will get py-3.

Let's give some custom class name.

Second test split. Great. So, this is the same idea

split. Great. So, this is the same idea as the first one. Uh you can also copy the first one and change the name. Okay,

it also okay too. Fine. So we got our flavor title. Now our HTML part is done.

flavor title. Now our HTML part is done.

So it's time for GUP. We will use use GUP hook and inside it let's start by splitting

the first line of text into individual characters. This will we can animate

characters. This will we can animate each letter separately for the slick reveal effect. It is similar as our uh

reveal effect. It is similar as our uh main hero title animation effect. Okay.

So let's do it. constant

first task split equal to split task from gap dot

create and the target should be first dash test dashplit.

Okay, let me copy it.

We don't want to target this one. We

want to target this h1. So like this and the vase object type is chars. We want to animate the

characters. Okay, that's why we are

characters. Okay, that's why we are splitting by character. Same thing for the second message. So let me copy it

and paste change the name to the second test split. You can copy and change

test split. You can copy and change first into the second profit. This one

is also the characters animation. So

let's do the type. It's char. Let's

animate the first text line. So G sub.

Yeah, this time I won't catch it. And

yeah, this time let's import it correctly.

Dup wrong because right now we want to do a reveal animation. The target is fast. Not this one. First T fast task

fast. Not this one. First T fast task split dot charars.

In the boss object, we will write our animation instructions.

Okay let's animate the each character. Start 200%

below its final position and give some quick stagger.

Let's give some easing. As usual, I love power window in out to be animated at the specific point.

Let's add school trigger. Trigger target

should be flavor section. This is the main section of our flavor section. So

we want to target this section. After

that, let's give start value. The first

top is top of the flavor section and the second part is 30% from the viewport. To

see what is happening, we have to give a markers equal to true. Okay. So, let me save and refresh. You can see here the

top is not hit. The target is not hit yet. There is no animation. But when we

yet. There is no animation. But when we hit that, we got our animation. Great.

Next, let's animate this middle freaking test reveal.

It is the same one from our message section. So, it will have similar

section. So, it will have similar process but don't copy it. Okay? Uh we

will do together. So, let's do another gap.2.

gap.2.

The target would be label text scroll for the bars object.

Let's start with duration and clip path value.

Go to the clippy website and this is our final position.

Copy everything and paste it here. Don't

forget to add percent.

We don't have to find our initial clipot point, right? So let's define it too.

point, right? So let's define it too.

Go to the clippy website. This will be our initial point. So let's copy it and paste it here. Great. Here you can see

we already get our freaking animation but we want also to play at some specific point. So let's add our school

specific point. So let's add our school trigger.

trigger is dot flavor section as our title for the starting

top of the flavor section and 10% from the viewport.

So remove the marker from our previous animation and add it here. Save it and refresh it.

start point is top of the flavor section and the scroller start point is 10% from the viewport.

So we got our we have six title animation and then we have got our freaking clip art reveal animation.

Great. Finally, let's animate the second line of text with the same approach.

Create another der from twin.

This time target is second text split.

We will animate each characters. So it

is a charge. Same approach. Y%

from 200 ster is 0.02. So it happened really quickly for the ease. Let's have power window in out. We will add school

trigger to trigger target is our flavor section for the start value is

top of the flavor section and 1% from the viewport. Let's remove markers from

the viewport. Let's remove markers from our previous animation and add it here.

Save it and refresh it. So let's start from here. We don't got nothing, but

from here. We don't got nothing, but we get our title animation and freaking clipout reveal animation.

And finally, we've got our delicious flavors title animation popping like a wave. Okay, in this way we have got our

wave. Okay, in this way we have got our score trigger animated titles.

This is the end of our flavor title component. So next one let's go to the

component. So next one let's go to the exciting thing and the start of this section. So let's do the start of this

section. So let's do the start of this section. Inside our flavor slider we

section. Inside our flavor slider we will have slider

wrapper. This is the main wrapper of

wrapper. This is the main wrapper of this wall slider. Okay. This wrapper

holds the entire slider. And let's take a look what is slider ripper have to offer is some

um height responsive. So LG HD DVH larger screen we have our fixed height but for mobile it's just only mobile and tablet it is just only some minimal

height DVH perfect but for tablet we want to get a minimal height fit and with this full finally we got some

responsive margin top value it's pretty simple okay so inside our flavor wrapper remove the flavor slider text. We will

have a div called flavors. This div will contain each individual flavor as a slide. For now, instead of writing civ

slide. For now, instead of writing civ diiv, so instead of writing multiple div, we will create one div and loop it

to get our whole slider. To do that, we have to have an array. Okay.

Let's go to our constant folder and create a new fine called indust for the data. Go to our GitHub

repository. You can also take this fine

repository. You can also take this fine from the readme snippet from our GitHub repository. Okay. Also, don't forget to

repository. Okay. Also, don't forget to give stars to our GitHub repository.

This mean a lot and this helped us a lot. Thank you. Copy this one and paste

lot. Thank you. Copy this one and paste in our indust file.

Here we get our flavor links. What does

it have? So it has a name, it has color and it has some rotation value. This is

responsive rotation. So median device like tablet you will have minus 8° but mobile we just have uh no rotation at

all. This kind of some preset rotation.

all. This kind of some preset rotation.

Good. In our flavor slider, we want to import this flavor licks and loop it.

Each flavor we are creating an unique slide. Okay.

So the first let's give a unique key. Use the flavor.

Use the flavor name as the unique react key. So for the each flavor container,

key. So for the each flavor container, let's use some styling. Let's give

position relative.

Z in is 30 to make sure it is above everything. And for the responsive width

everything. And for the responsive width at the larger devices, we will have 50 VW. So it is a half of the width. But

VW. So it is a half of the width. But

for the mobile devices we will take 96.

For the responsive height and the larger devices we will have 70 VH is kind of

fixed one. And let's also give

fixed one. And let's also give tablet responsive width. MD is 90 VW

and tablet height should be 50 BH. The mobile should be 80. The

50 BH. The mobile should be 80. The

important one in here is we have to give blast dash none to prevent shrinking and stretching on different devices. Good.

Inside it we will have different images and the h1 tag or the play name. Let's

do our first image. First image is the background SVG. So let me show you what

background SVG. So let me show you what do we have in our public slash images

folder. We have names like this black

folder. We have names like this black dash bgsvg black drink blue bg brown bg

brown drink. So the only prefix things

brown drink. So the only prefix things are changing colors. The back of the things are fixed. Uh if we only change

this color and fix at everything we can get our dynamic background and dynamic images. Okay. So here let's copy

images. Okay. So here let's copy something maybe black copy paste it here. But instead of stud one we will do

here. But instead of stud one we will do something like this.

This is a back tick. We can write JavaScript things inside this back tick.

Remove public folder.

And here instead of aesthetic black we will use our flavor dot color.

Okay, the image should appear in here.

But I think uh flavor library is not working. So let me reimpport here.

working. So let me reimpport here.

Remove everything.

Add lever import lever slider from do slash component slash lever slider. Perfect.

Okay. I think I see what is happening.

Yes.

So we have to this is if we do something like this uh we have to retain. So right

now we don't return anything and I'm finding like why it is not working. We

have to return like this. You see? Okay.

But the we can we can totally remove everything that curly bracket curly bracket thing. And

bracket thing. And you see because there is only one di to return. This is a normal way. I

return. This is a normal way. I

mistakally add curly bracket. So let's

do not make things really complex and complicated anymore.

Okay.

So this is the responsive of that slider. Uh also in the original website

slider. Uh also in the original website there is no slider happening in the tablet and mobile devices.

Of course I will focus on the laptop device to see the slider animation happening. But let me do my HTML first.

happening. But let me do my HTML first.

Okay perfect.

Let's give a class name to our background images to make sure things are still in the absolute bottom. Let's

add another image. For now, we will do a drink one. So, go to the images.

drink one. So, go to the images.

Just copy one drink image and add it here. Remove public. Here we will go

here. Remove public. Here we will go with the same approach. Add a package for JavaScript.

Instead of red, we will use our flavor dot color.

Great. You can see blue for blue drink and orange for orange drink. Perfect.

You can also give all uh but let me skip here for the class name is simple. It

just drinks.

So take a look what this brings me is a position absolute and position is uh left center left 50 50% and minus translate transform from 50% so is

typically in the center in the x direction and everything is at the bottom zero and our height is for the top leg is a full height but for the

mobile devices is a fixed height h 80.

Okay, go back to our flavor slider and let's add one more images.

This time uh it is for the floating uh elements. So go to the images folder and

elements. So go to the images folder and copy one image. Past it here, remove public

image. Past it here, remove public folder and do the similar process.

Remove everything. add back and instead of eggs uh we will have

flavor color. Great. Here you can see we

flavor color. Great. Here you can see we can already see our cookie happening. So

let's give a class name. It is called elements.

And what is elements? Element is

absolute and for the responsive uh top is zero. bottom is auto but for the

is zero. bottom is auto but for the mobile is bottom tang and which is full.

Okay, right now the only thing that we have to do is add a flavor title in here.

Let's go to here. The last one will be H1 tag. The content should be flavor dot

H1 tag. The content should be flavor dot name.

Great is peanut butter. Perfect. Right

now uh we have to add our rotation value. Do

you remember it? We have predefined rotation at the top. It should be rotated. The only thing there is no

rotated. The only thing there is no rotation is for the movement devices. So

let's add our rotation to each flavor the IV.

We will remove everything here because we want to add a JavaScript. So back

take here and add everything back. But

for the last one we will add flavor rotation.

You can see it here.

Things are already pretty good but there is no animation happening in the median or tablet devices. Let's check what do we get on the mobile devices. Me refresh

everything.

You can see it. This is for the mobile devices. Every cut, every flavor card is

devices. Every cut, every flavor card is stuck in a flush direction is column. So

we will have some gap in here and things are really really organized as the original website built. This is the

mobile devices version and this is a tablet version and let's see what would be for the desktop version.

Okay, this is not good. Splitting the

section like this is not good. Let me

show you in a full screen. So, uh right now these are what we got. All of the other flavor cards are in here and we

will animate it with G school trigger painting effect. Okay. So, let's go to

painting effect. Okay. So, let's go to the animation part. So, let's do the animation part. But for the animation,

animation part. But for the animation, we have to focus the laptop device, right? So I don't want to do the

right? So I don't want to do the splitting anymore. Okay. So let's do it.

splitting anymore. Okay. So let's do it.

As usual, we will import use G hook for the riat. Create a timeline.

the riat. Create a timeline.

Gab imported the timeline.

Of course, it is a school trigger.

The trigger target is our flavor section.

You remember our main container flavor section. So paste it here.

section. So paste it here.

And starting value is 2% from the flavor section and top from the viewport.

We have to define an ending value here.

Let's do around 500 px and see what will happen. Okay. Of

course scrap scrap will be true. That way we can u make slider animation with scroll scene.

Let's really play our animation. TL.2

the target is the flavor. The target is the flavor section.

So it will be the whole container and the only thing that we have to animate is the x value. So let's have

minus 500 pas. So plus 500 pas will be right side and minus 500 will be the left side. In our case we want to

left side. In our case we want to animate to the left side. So it will be minus okay minus 500 px.

Of course, we will give some easing as usual. Power one in out.

usual. Power one in out.

Go to our browser, refresh everything, remove these uh scroller markers because these are from the flavor title component. Go to our

flavor title component and remove marker from here. and go back to our flavor

from here. and go back to our flavor slider here and add markers true in our gap timeline animation.

Refresh everything. Right now there won't be any animation yet. But when you hit this one, you can already see there

is that X direction fake horizontal scroll sliding animation.

Okay. But it is not really good at all right now because you can only see one cut like a diagonally happening. The

problem is let me add more 1,500 here also 1,500

here. So 1,500 pixel. Now it will go to

here. So 1,500 pixel. Now it will go to the left side for more 1,500 pes here.

Right? But this is 1,500 here also. So

how do we going to define the right value? How do we going to calculate the

value? How do we going to calculate the right value?

We cannot set the fixed value. We have

to calculate it manually. But there is a one way. It is a really a good way and

one way. It is a really a good way and it can save money. Let's see. Scroll

amount equal to slider ref. Oh, we

haven't defined a slider ref values yet.

So let's give a slider ref constant slider ref equal to use ref and add a ref

slider ref in our slider wrapper container.

Perfect. If we use ref, we have to do current scroll

with minus window dot inner width. What

is happening? What are these value? Let

me see.

Scroll amount before everything. Let's

control lock this value first. Refresh

everything. And here.

So it is the scroll value that we have to animate.

And I console lock this one. This is the window in the width value. By

subtracting from this slider current scroll width to window in the width, we

can get our desired scroll amount. Okay.

And here instead of static value, let's give a back tape so that we can add JavaScript. Okay. Plus equal scroll

JavaScript. Okay. Plus equal scroll amount.

It is a px for our x direction value also a back tick it is a minus value and scroll amount px.

Let's see what is happening in our browser. when you hit it.

browser. when you hit it.

Oh yeah, there are many scroll amount happening because the thing is we have to ping the

section in place during the scroll.

Let's add an really magic g feature which is called ping property.

When you set pin equal to true. See this

is really magic. Okay. And this is really popular feature that gap offer.

When you click it that container is ping that flavor section that flavor section is ping at this moment before before end

marker hit this scroller end. Okay. So

you can scroll it around here. Scroll

scroll scroll. And you see do you see it? This is the end marker and when you

it? This is the end marker and when you hit it the ping value is released. So

when you hit it pin become false. The

ping value is released and we go to the next section. But this that we have

next section. But this that we have another one uh a black flavor. We cannot

get a black flavor because this flavor section scroll with calculate this one included also. The thing is we

have to plus 500 pixel to see our full slider in here. Plus 500 pixel so that we can see at the end of it.

Okay.

You refresh everything and when you add a scroller start the slider thing is happening. Scroll,

scroll, scroll. And is not yet, but we see this and and

yes, now. So 500 is not enough. Let's

yes, now. So 500 is not enough. Let's

give 1,500.

Refresh it and scroll, scroll, scroll, scroll, scroll. And perfect. When you

scroll, scroll. And perfect. When you

hit Yes.

Okay, right now I think you will notice that the scroll is not really smooth, right? But don't worry, we have our gap

right? But don't worry, we have our gap paid plug-in, but now it's free. Thank

you, Buffalo. It's called scroll smoother plug-in.

You see when you scroll, it is not finished. you you stop the scrolling but

finished. you you stop the scrolling but the website is still moving because it you use scroll smoother plug-in and it is really amazing. So let's quickly use

in our project too. Let's go to our app.gsa GSA where we register the

app.gsa GSA where we register the plug-in.

Besides score trigger SC we will add scroll smoother plug-in

and with use effect scroll smoother sorry scroll smoother docreate is smooth

value is three and effects is true let's see what change in our browser.

Refresh everything.

And yeah, it's not working. Every

scrolling feature is not working yet because we forgot one step. When you use scroll smoother, you have to add two things. The first thing is school

things. The first thing is school smoother create part and the second thing is HTML part. Go to the official website. And here we have already

website. And here we have already finished our quick start. But the next time we have to set up like this. So

let's copy this to DIV and wrap it except nbar because we don't need we

don't need to do the scroll smoothing part for the nuff bar inside this div.

Everything will go to here and instead of use effort, let's use use gstep.

Remove use effort.

All right, go back to the browser.

Refresh everything and see how smoothy it is. Right. Let's see how our slider

it is. Right. Let's see how our slider will happen. Okay, you have to refresh.

will happen. Okay, you have to refresh.

pink scroll smoothie and like a better. Yes.

Now we got our scroll smoother effect.

Okay. I really love it. It is kind of addictive. Yeah. Perfect.

addictive. Yeah. Perfect.

So the last thing that we have to add in this section is we have to make parallelless title animation effect in our website. We got this kind of

our website. We got this kind of paralous thing. You see you can see it

paralous thing. You see you can see it when you scroll it all titles are moving in different pace.

Okay. So let's try to make this effect.

It's really easy. go to our flavor slider back and create a timeline for it. Let's call

title timeline. This sub timeline we will add school trigger trigger target is of course flavor section

starting point is top top.

So top of the section and top of the viewboard ending point is bottom of the section but 80% from the

viewport scrap is two.

Let's add our real animation tap.2

the target is fast text split title.

This is from the flavor title but uh we can do in here. Okay. So let's copy from our flavor title which is called less text split

for the V object. The animation

instruction would be happen like this X minus 30. So it will slide it 30% to the left.

The final one is easing as usual. Power

one door in out.

The next one is our middle clip art reveal animation part. So go to our flavor title box and copy flavor text

scroll. The target is flavor text scroll

scroll. The target is flavor text scroll and the animation is X% around minus 22.

So this is a slightly different pace from the first test plate. So this is this uh the tax will be slided 22% to

the left. Here we will use a position

the left. Here we will use a position parameter that mean it will start this animation at the same time as the previous one.

This animation will start at the same time as the previous one. This is what position par parameters mean.

If we do something like this, this will start at the end of the first animation play. Okay. But for this one, this will

play. Okay. But for this one, this will play at the same time as the first animation play. This is called position

animation play. This is called position parameter. And if you do something like

parameter. And if you do something like this minus equ= 0.5 pressing mean the animation will play 5 0.5 second before

ending the first animation. In our

cases, we want to happen at the same time as the first animation play. Okay.

So, let's do the final title parallax animation. You can copy fact text plate

animation. You can copy fact text plate paste it here. Replace with second or

the V object animation instruction is X 10%. X% minus 10. That means slide 10%

10%. X% minus 10. That means slide 10% to the left.

I forgot to add easing in here. Here.

Great. Again, we will use that position parameter. So, these two animations will

parameter. So, these two animations will overlap for each other for a smooth reveal. Let's see. Refresh it.

reveal. Let's see. Refresh it.

And you can see it when you scroll.

So if we don't do these overlapping position parameter you can see one two three one two three like one two three

yeah uh because uh we have to wait to finish the animation one after another right so animation happen and second

animation and that animation we don't want this effect we want to play lapping.

So we will use this gub another important position parameters.

Let's see. Refresh everything. And we

got our desire little parallax effect.

This is the end of this flavor slider section.

In this section, we learn together about parallax and our fake slider horizontal animation with gap pain feature. Before

that, let's remove these markers.

Markers remove refresh completely and done.

Now there is one problem in our laptop device. Our animation is good but in the

device. Our animation is good but in the top leg there is only two and we don't want to play our this slider animation

anymore right in the tablet.

So let's use our react responsive library and see how we can control this

situation.

constant is tab that variable and use use media query hook from the

react responsive library. Inside it the setting query is maximum width

just 104 pixel. that mean it is uh maximum width

pixel. that mean it is uh maximum width is only 1,024 pixel. So that mean laptop won't be anymore. So that maximum weight

and at the tablet value. Okay. Uh so

this use media query hook to detect if we are on a tablet screen site something like this. So

if is not is tablet. So if it's not a mobile, if it's not a tablet, we will play our slider animation.

Let's copy this slider animation part and paste it here. Save it and refresh everything. You can see only our title

everything. You can see only our title animation and parallax animation is playing. But for the slider there is no

playing. But for the slider there is no animation anymore because of the help of use media query hook from the re responsive. This can save a lot. We

responsive. This can save a lot. We

don't have to do like window dot inner width inner height uh and much much more imperative stuff. This way this is a

imperative stuff. This way this is a more weird stuff. So is a is a really nice one. Okay. Right now our flavor

nice one. Okay. Right now our flavor slider section and flavor section is perfectly finished. Let's go to the next

perfectly finished. Let's go to the next section.

The next section is nothing crazy happening here. We will have our usual

happening here. We will have our usual title and clipart part and our reveal paragraph animation and the nutrition box with a big big image as a

background. Of course, there is a

background. Of course, there is a dipping image as a DIV divider. Nothing

crazy happened. So, let's quickly build this one. Close everything. Go to the

this one. Close everything. Go to the folder structure. Inside the section

folder structure. Inside the section folder, we will have our nutrition section file.

Close it. Type R AFCE.

Remove import. Go to app.t GSA below flavor section we will have our nutrition section here you can see this is a nutrition section let's give some

styling remove everything replace with section and the class name is nutrition section

okay things are already changing let's see what nutrition session does in our in the CSS file is some responsive I overflow hidden and position relative.

Okay.

Inside our nutrition section, we will have the first image. Uh it is a slider dip. You can see this is kind of a dip

dip. You can see this is kind of a dip image.

Go to our public folder images folder and scroll to the bottom. Copy slider

dip png. Close the cyper. Paste it.

Remove the public border.

some give some classes with full object cover. You can see this is a slider tip. It's kind of catchy, right?

After that, you will have another big image as a background. Go to the image

border back and copy big image PNG.

Oh, not rename. Copy. Close the sidebar and paste it here. Remove public bur.

Normally it is like this. Let's give

some styling. The custom class is big image. What is this big image does in

image. What is this big image does in the in the CSS. So it takes width full position absolute and height full. But

for the medium is like two of the touch and for the mobile is 50% left zero bottom zero object bottom to make sure

it stay at the bottom of the container and for the large devices the object is contained but normally is object is

covered. Great. After two images added,

covered. Great. After two images added, we will have our main content container for everything that will be included in

this session. Profit. Let's give a

this session. Profit. Let's give a display plus and for the median devices and more we will

get a row direction but for the mobile we will get a plus column direction.

justify is between in both direction and let's give some responsive padding X

mobile is padding five and margin top is 14 at mobile but for the tablet and large devices margin top is zero. This

is our main content container. Inside it

we will have another div which is position relative inline block at the median devices it

will shift a little bit lower to the bottom. So translate y-

bottom. So translate y- 20. So on the median screen the content

20. So on the median screen the content will be pushed down for a little bit.

This container is for our title and the clip art animation. So let's do the title one first. Let's do a ripper for

everything. In that ripper,

everything. In that ripper, we will give our general title class position relative plus direction is column.

Just define is center item is center and cap value is 24. Okay. Inside it we will have two things. The first thing is H1.

The content is still text.

The next thing is our clipath box. Okay.

As usual for our H1 we will have a overflow hidden wrapper.

And this time please sub start to make sure it is at the start of the container.

Perfect. It's still text. The next thing it's here st y sty. As usual we will leave with an empty value first and then

we will animate it with the g. Okay.

Inside it we will have a div and h x2 tag. H2 tag is bodyguard

tag. H2 tag is bodyguard can already see but let's give some color text. So text dash make but yellow

color text. So text dash make but yellow like this to give a background is bg dash yellow brown this one.

Of course, we will have our responsive padding. Mobile padding bottom five,

padding. Mobile padding bottom five, tablet padding top zero,

mobile is padding top three and tablet padding x y but mobile is only just

three and it is a inline block.

Perfect. So the only reper is nutriting test dash scroll and we also have to

give place self start for the nutrition test dash scroll and it is not working.

Okay. So let's take a look what is nutrition test is doing in our index docs.

It is some rotate value border and for color test it no wrapped here opacity is zero. Okay. Because I would like to get

zero. Okay. Because I would like to get really fing effect that one I keep opacity zero but you can let me do

oppositive 50 first so that we can see what is happening in here.

Great. And then we have to do a paragraph and a nutrient box. So this is for the title block. We will have

another block. The direction is plus for

another block. The direction is plus for the toplet is just to find center. But

for both item center and translate Y a little bit fine. And we will have our P tag.

Let's copy that P tag from our Figma design. Here you can see you can copy

design. Here you can see you can copy and paste it here. We have already see what is happening. But we have to change the font family not Antonio we have to

use approxima. Okay. So let's give a

use approxima. Okay. So let's give a parent div for that P tech.

The thing is we have to limit the maximum width. So MAX is wid ex

maximum width. So MAX is wid ex MD for the mobile devices. And for the P tag we will go for it with text LG. So

font size a little bigger than the normal value.

And for the median devices we will have test dash right not central and not start. So not left value. We want to

start. So not left value. We want to make sure it is at the right. And test

dash length so that we won't get irregular shape. And then we have to

irregular shape. And then we have to give a font family as a font paragraph like text we get our proxima font

family. Perfect. So after that block we

family. Perfect. So after that block we will have the last block or the nutrient box. So it is a custom class which is

box. So it is a custom class which is called nutrition box at the bottom of our section. Inside that nutrition ps we

our section. Inside that nutrition ps we will have a parent diiv for all of the nutrients licks wrapper. You can already

see that there is a pillshape box at the bottom of our section. So inside this lick wrapper we will loop the links

array list array. Okay let me see to the index.js GS constant file and here which is called nutrient links nutrient links

import nutrient links from the constant and it will be industrious right but if the file name is industrious you don't

have to include that okay so nutrient list do map nutrient and index

here don't include color bracket last start with a di Okay. So here let's give some styling. But before that

some styling. But before that let's use index as a unique key. For the

styling is pretty simple. Position

relative plus is one and inside it we want to center in a vertically. So it is a colon center. Okay.

There will be another div PC. The first one is nutrient dot liver

PC. The first one is nutrient dot liver hesian calcium, vitamin A, vitamin D and iron

etc. And the second PC is app. So this is not dynamic is a static

app. So this is not dynamic is a static one. And the third P tech is

one. And the third P tech is nutrient amount

around 245 mg 500 176 some numbers but there's one thing we have to include

this border some kind of divider between uh nutrients. So here we will use some

uh nutrients. So here we will use some JavaScript.

If index is not equal equal UT links dot length minus one

and we will add a spacer border. That means add a vertical

border. That means add a vertical divider. add a vertical divider line

divider. add a vertical divider line unless it is a less item. This is a less item. Nutrient list minus one is a last

item. Nutrient list minus one is a last item. So if is not the last item, please

item. So if is not the last item, please add a border. That's pretty simple.

So let's give some styling to our P tech.

The first P tech is okay. You only have to give some font size. But the thing is we have to change the font family. It should be

font paragraph. The next one is also

font paragraph. The next one is also font paragraph but with a smaller font size. Let's give some margin top to it.

size. Let's give some margin top to it.

The last one is uh we don't have to change our font family because it is only the Antonio font. We only have to

adjust the font size.

A median is text for Excel.

So this is for uh letter spacing.

tracking titer is from the tin CSS utility classes and font is

so it is great in the tablet also laptop is also cool let's see our mobile devices

it is too too compressed right there is no space at all so let's try to fix this of course we will use a use media query hook from the readress This one's a

library here. Let's see constant is mobile equal

here. Let's see constant is mobile equal to use media query hook quy should be mass width

is only 768 pixel to check if the current screen is mobile size below 768 pixel should be considered as a mobile

device. Okay, let's do next things. List

device. Okay, let's do next things. List

set l is you state the default one and initial one is nutrient list. So we are using a state

nutrient list. So we are using a state variable to hold the list of the nutrients to display. By default it is set to the full nutrient list array. So

by default we will show all five uh nutrient analytics in everywhere but the device is mobile we will only show to

three. To write this feature we will use

three. To write this feature we will use a use effect and the dependency is is mobile. So this effect runs every time

mobile. So this effect runs every time the is mobile state changes. It updates

the nutrient list based on whether we are mobile. So if Oh, what happened?

are mobile. So if Oh, what happened?

Wait a minute. Sorry. Uh uh uh uh not like this. Yes. Sorry. It's my mistake.

like this. Yes. Sorry. It's my mistake.

So in our color bracket if is mobile, we will set only the first three items

for the cleaner view.

So nutrient list dot slice 0 to three. So from zero for index number zero to index number three just only three items

else. So if it's not a mobile

else. So if it's not a mobile we will show every links. So it shows the full links on the larger screen. Let

me if it's not a mobile. Replace our

nutrient list with this list state.

Let's go to our nutrient links. Replace

these two with list state.

Refresh everything and let's see. So

yeah, it is not a mobile device. So we

got a full lure. But if it is a mobile devices, we only get three nutrient list. So our current use effect and

list. So our current use effect and slides is working perfect. Now let's go to the GA part. We will animate this

title clip reveal animation paragraph.

This is the only main animation happening in this nutrition section.

So let's animate it. We will import use tap hook.

First we will split our title using split text and create the target is

nutrition title. Okay. What is it?

nutrition title. Okay. What is it?

Nutrition title. This one.

Let's give a nutrition title class name. And paste it here.

class name. And paste it here.

For the V object type is characters. So

it is chars. Let's also split another one. A paragraph one constant

one. A paragraph one constant paragraph split equal to split text dot create dot nutrition

section dot font paragraph. So everything from paragraph

paragraph. So everything from paragraph is included. I also want to animate it

is included. I also want to animate it these values also. So we can give something like this. Okay. And if you want to animate everything uh that is if

that is a P tag you can do instead of font paragraph you can do a P tech.

Perfect. Let's go with this for the V object things as we have done before the type is what's in lines

and we will have our line class which is called paragraph line. Do you remember it?

paragraph line. Do you remember it?

Paragraph line is the one that make overflow hidden on each line. Perfect.

Let's start to write our animation.

Create a timeline call content timeline. You can also give content t and gap import the gap do

timeline.

We will have our score trigger. So

trigger target is our nutrition section.

Start value is top from the nutrition section and center from the viewport. To

see this markers, we have to set the marker equal to true. Refresh

everything. And this is our markers.

Okay. So let's really animate our title.

content timeline dot from a reveal animation. So title speak dot chars

animation. So title speak dot chars for the v object the animation instructions are like this y pressing is

100 so it's 100% from below let's give some ster a quickly one and easing is

power to do out a little bit yeah let's see here and yes you can see we will

have Another animation which is called from to animate paragraph spilled dot warps.

The animation instruction are not start below not start from 300% below the initial point and let's slightly rotate

a little bit for the easing power one in out is good duration is 1% and ster value I want to make sure it happen

really quickly so ster value is 0.01 01 there is no position overlapping value because I want to happen this animation

after our headline animations finish perfect let's refresh everything and see this one happen after that this one happen good so let's animate our clip

art part also create another timeline for it it is a title timeline and equal to gap dot timeline for the fast object

is only is called trigger.

Trigger is our nutrition section and start is top from the nutrition section and 80% from the viewport. Remove markus

from our previous animation and replace in here title timeline animation dot2.

The thing that we want to animate is our nutrition text scroll. Let's copy it and paste it here. For the vast object,

let's give a duration for 1 second and opacity is one because I want to make a fading effect, right? And we will have a

clip path value in here. Finally, we

will have a ease for power one in out.

So, let's go to our incss.

uh before that copy nutrition test row here and find it right now instead of opacity zero we will completely do the

opposite zero instead of 50 okay let's go back to our clippy website I know that I can copy from our previous

sections because the value is the same but I want to make you guys understand this clip website really really Good enough. That's why I'm doing this

enough. That's why I'm doing this repetitive work so that you can understand much better. Okay. So this is

our initial position. Copy our initial position and paste it in our sty flip

part. To cut the final part, we want to

part. To cut the final part, we want to get a whole square reveal effect. So

let's copy this value and place here. Okay,

place here. Okay, let's see.

Refresh everything. And when you hit the start value, you're going to see when you hit it, it is happening. Yes.

So everything is animated in this session and this session is just only about it. So it's pretty simple, right?

about it. So it's pretty simple, right?

Maybe this one is too down into it. So

let's try to change something. Nutrition

title. Go to the nutrition title. U-3

maybe if we set.

So maybe PB-3.

How about that? Yeah. Okay. And then in any other situation is PB-0.

Also the last five is PB-0.

Yes, you can change uh as you want, but I think this is great for me. So let's

quickly finish this project by removing marker. True. Refresh. Perfect.

marker. True. Refresh. Perfect.

Let's go for the next section.

You can see how smooth and scrolling the reveal animations are happening. Okay,

let's do it. Close everything here. And

in our sections, let's create benefitic session. GS6

session. GS6 type ref.

Go to our app.gsx and we will add our benefitic session. Great.

benefitic session. Great.

Let's refresh everything. You can see there is a benefitic session in the browser. Perfect. Close it. So as usual

browser. Perfect. Close it. So as usual we will start with a section tag and a class name is

benefit session. Pretty simple and

benefit session. Pretty simple and straightforward.

We already have uh some changes. So

let's see what benefit sessions mean in our indust.

We will have a minimal height deviation and some background overflow hidden position relative. That's it. Okay, we

position relative. That's it. Okay, we

have predefined P tag and first title, second title, third title, full title.

We will go for the next one. Okay, let's

focus on these first. So this is the main section that will hold everything.

Inside it, we will have a parent container for our highlight text.

Let's you t in CSS container MX auto padding top is 20. So it's pretty height in the top. Okay. And we will do another

div which will center everything vertically.

Perfect. Inside it let's start with a P tag. Okay. So for the P tag you can go

tag. Okay. So for the P tag you can go to our Figma and copy it.

this puck. Perfect. And save it here.

Let's remove these things.

Okay. Also, let's add a break tag after the advantages. Perfect. As you can see,

the advantages. Perfect. As you can see, for the P tag, we have text make color, font paragraph for the font family, text

center, and font size. So, let's go to our main highlight titles animation.

of course a div for everything that includes titles.

Let's give a class name for it. So some

margin top value and center everything in a vertical way. So

margin top 20 and call dash center. This

is a utility class. Okay, this is our own utility class. Call center. Perfect.

Here as you can see we have four similar structure elements as you can see uh

everything it's similar the structure is similar background text color and some rotation

right so let's create a component for this okay go to our folder structure and in the component folder let's create

click path title component do GSS type ref

and in this component we will accept five different prop. The first one is title and color

for the text color and bg for the background color.

Let's accept a class name for additional CSS class that will need for different styles.

And the last one is border color. So we

will accept these five prop. Okay. And

here remove the clip path title.

Write a class name general title.

Great.

Before building this, let's import that clip title in our benefit section.

Inside this DIV, let's add a clip title.

And we will do for the title is chef strible. You can also copy from the

chef strible. You can also copy from the Figma mark if you don't want it typed.

It's okay. And for the color, I think it's a MC version washing. This

one we will do the MC.

And for the background, it should be C88 E64.

Okay, this is a background color. And

for the class name is bus title perfect. And the last one that we will include is watercolor

which has 2 two two one two three.

Great.

So this is a simple clip title and last really create our component remove a react import

inside it. The structure is pretty

inside it. The structure is pretty similar as our previous clipart uh di.

So it is really the same but let's not copy it. Let's build it out real. Okay.

copy it. Let's build it out real. Okay.

Inside uh this will be for the sty. You

already know we do a clip but value in here but this time we will also include a border color

here. Great.

here. Great.

equal to our section and for the class name remove a double quote include a curly bracket so that we can write JavaScript things

here class name we will also include our custom class name that we give through the prop and there will be some border

dash 5BW it is the same text no rep okay Let's start with opacity

50 because uh we will also do the fade in fade out animation also. Okay. But uh

for now let's give 50 so that we can see what is happening. Oh let's do it 100 for now. And inside it we will have a H2

for now. And inside it we will have a H2 tag.

Perfect. So for the tag we will use the title. So you can see it is a shaft

title. So you can see it is a shaft stable title that we give from our bonific session. Good. And for the class

bonific session. Good. And for the class name let's do some responsive padding in here. So PB-5

here. So PB-5 and PB-5 it is the same. So this is okay.

And for the MD PA14, but for the mobile it's just only PA-3.

For the MD padding top is zero. But for

the mobile padding top has to be three.

Perfect. In our H2 here, let's give a sty which will be our text color.

Great. We also have to give a background in here. So after the class name, we

in here. So after the class name, we will include a dynamic background.

Background color and our prop is DG.

Perfect. Let's really go to our section.

And now you already see that we got and we got a nice highlight titles. Perfect.

Okay. So let's go back to our benefit section and copy this clip title

component more. 1 2 3 Great. Oh, we got

component more. 1 2 3 Great. Oh, we got four. Okay. So let's replace with a real

four. Okay. So let's replace with a real value. The second one protein plus cing

value. The second one protein plus cing and a color code is 2221 23. So is the above border color code. For the

background is a Mickey color. For the

class name, it is a second title and we got the same border color. Great. The

third one is infinitely recyclable. For the color is

infinitely recyclable. For the color is the same, but for the background, we got a new one. And class name is the third title. Perfect. You can already see

title. Perfect. You can already see things are changing. and we will go uh later to see which these class name are in our CSS. So let's finish uh this ones

first. Okay, the last one is we got a

first. Okay, the last one is we got a title, we got our color, we got our background color and the class name is

fourth title. Perfect. And border color

fourth title. Perfect. And border color is just is the still same thing. So go

to the indust CSS. Go to our benefitic section here.

There is uh nothing like crazy happening here. Some rotating value position

here. Some rotating value position relative and some set index. So that and this one will stay above these one. That

is the trick. Okay. So give a position relative and give the index one or two or something a bigger one than this below one. So it will create a

below one. So it will create a overlapping effect. Okay. Second title

overlapping effect. Okay. Second title

we will have some translate value and rotation. So for the third title of

rotation. So for the third title of course rotation value translating value position relative and set index to stay above then these two things. Okay full

title is also pretty the same rotation and translation. That's it. We got a

and translation. That's it. We got a pretty clean one. We don't have to do these in our benev session. We only have to use a reusable component over again

over again or and over again. Profit. So

let's animate these highlight titles with our ga. Okay, it's pretty similar that we have already got in this and in

this it is pretty similar clipod reveal animation. But let's see before the

animation. But let's see before the animation we have to include a final P tag a final message uh in this section.

Okay. So we will go after this DIIV.

This DIiv is for these four highlight titles. So let's create another DII for

titles. So let's create another DII for it. So for the styling it just only need

it. So for the styling it just only need to do a sum margin top response value.

So for the median divisor what happened?

So for the media devices margin top is zero but for the mobile devices let's give a margin top is 10 inside it a

final note call and mar with dot dot dot so much more with three dots perfect

let's go for the animation so let's animate our clipot title before that remove this react import in here

as usual we will import our use dup hook for the gap animations let's create a timeline for it

let's call it reveal timeline import gap in timeline so for the bars object this time we will give some delay so delay 1

second and we will add a school trigger our trigger target should

this whole benefic section. Copy it and paste it. For the starting value, we

paste it. For the starting value, we will do top of the bunny section and 60% from the viewport.

Okay, let's give an end value is top of the benefit section and top of the viewport. Perfect. Let's give scrap is

viewport. Perfect. Let's give scrap is true. True. But instead of true we will

true. True. But instead of true we will give 1.5 to create more smoothly vi perfect. And finally let's give markers

perfect. And finally let's give markers true to see what is happening in our application. Great.

application. Great.

Let's really start our animation with reveal title two and the target is first title of our bonific session.

Okay. So the select should be like this.

session dot fast title. Great. For the V object, let's give a duration 1 second. Do you

remember we give opacity 100 in our clip title because we want to animate like this. So go to our clipper title and

this. So go to our clipper title and instead of opacity 100, our standing value should be opacity zero and we will

animate to the one. Great. The next one is our clip art value. Let's see our animation back. So, it reveals from the

animation back. So, it reveals from the center, right? So, go to the Clippy

center, right? So, go to the Clippy website and as usual, this is our starting point. It should be something

starting point. It should be something like this. Right now is completely

like this. Right now is completely closed. Copy this polygon clip art value

closed. Copy this polygon clip art value from the website and go to our clipart title component here. Paste it.

here. Paste it.

Instead of 49 48 these kind of value let's give a 50%.

So right now things are completely closed at the center. And then we will we would like to open uh make a reveal animation as we have done before in our

previous sections. Right. Let's go back

previous sections. Right. Let's go back to our clippy website and open these two

got a full scroll and copy this polygon value and paste it here. Don't forget to add present

here. Great. And the last one is our

here. Great. And the last one is our east.

So this time instead of power one dot in out let's use psych do out to get a smooth circular easing for a natural expansion effect. Let's see everything

expansion effect. Let's see everything and refresh our browser. Great. So when you

hit a start you get a slowly expansion effect that is crossing uh because there is only one animation

in our entire timeline. So let's add more animation to it, right? More twin.

It should be four twins because we have four highlight titles, right? So paste

it into another three more twins.

Perfect. And instead of fast, let's go for the second and third and four. F O U T. Great. We don't have to

four. F O U T. Great. We don't have to change anything. So let's refresh

change anything. So let's refresh everything in here. When you hit start, you can see that things are appear one

by one with a smooth and fancy effect.

Yeah, that's it. You don't have to do anything. You make one twink and copy

anything. You make one twink and copy it. That's it. Perfect. So our entire

it. That's it. Perfect. So our entire highlight titles animation is finished.

Let's go to the next big part. video

pinning part. Okay,

this time we will go for this video pinning effect that almost every award level website use and at the end of this

tutorial you will see how easy to create this award the website animation. Yes,

great. So let's go back to our project and in our benefic section we got this div for the highlight titles and we got

this div for everything everything related to the first part. Great and we will include another di

for our video painting animation. So for

this one we have to give a position relative and overlay dashbox class and inside it we will include our video

pinning part but let's create a component for it for a really much simpler bashing. Okay. So let's create a

simpler bashing. Okay. So let's create a video ping section component inside our component folder.

Create a file which is called video ping section. GS6 type R E F C E as usual

section. GS6 type R E F C E as usual remove import ri part good

so let's add this video pin section in our benefitic section perfect and uh remove markers through as you can see we

already got our video p session in here perfect okay so let's really start to create our video ping section component

here instead of diiv t we will use a section t this is a main section that will host everything that is related to

the video painting area okay let's give a class name for this section which is called v paint section and

inside it we will have a parent diiv for everything class name is size And we will include another class name

which is called video box. Great. And

for the styling here we will give some sty.

So before creating this let me give you some time to think about this revealing effect. Which technique do we going to

effect. Which technique do we going to use? Have you think about it? Okay. So

use? Have you think about it? Okay. So

the answer is we will use a clip value.

We have already used many clip art animations in this website. Also, we

will use another clip art reveal animation. In our case, we will do a

animation. In our case, we will do a secular revealing effect using a clip art. Right? So, I can already set that

art. Right? So, I can already set that this website use a lot of clip art and clip art are amazing. Yes, if you know how to use clip art using a clippy

website, your website has gone to another level, next level. Perfect. So,

let's go back to our component. And so,

for right now, let's give empty for the sty and later on we will replace with the clipart value in here.

Okay, let's add a video tag. So for the SRC the video is in the public folder

not this this is what we got pin videomp okay paste it here and remove a public photo you can already see we got our

video uh but let's add more attributes place in line muted

loop and the last one is auto for seamless effect. Great. You can

refresh it and videos are auto play and it is kind of looping right.

So the thing is we cannot get with just only one video. As you can see in the original website there is a video and there is a secular tags um that is

rotating and with a play button. Right?

So let's include this also. After a

video tag, create a div for these two things.

For the styling, let's give app center.

This is our custom utility class uh that centers everything which has position absolute. Perfect. Let's give some

absolute. Perfect. Let's give some responsive scale for the median devices.

Scale is default one. But for the mobile, let's scale it into two. So for the T one is scale 200.

Perfect. And let's add our secular text.

Okay. So go to our images. It should be in the cycle text SVG. Copy it. Close

the sidebar and paste in here. Remove

public photo. You can give alt if you want. So for the class name let's do

want. So for the class name let's do spin cycle.

Okay. So before everything let's go to our indust CSS and check it out what these

classes that we got. You can already see uh we have got a spinning cycle text right. Okay. So for the video pin

right. Okay. So for the video pin section uh we will get a 110 by in the tablets or iPads or laptops and much

much more larger devices. But for the mobile we have an fixed 100 DVH high and of course it is overflow hidden to not

having like scroll bars or something.

And we got some uh responsive translate Y value and some responsive margin top values. For the video tag, it is a size

values. For the video tag, it is a size full. Sizeful mean width 100% and height

full. Sizeful mean width 100% and height 100%. Position is absolute. Insect zero

100%. Position is absolute. Insect zero

mean top zero, left zero, right zero, bottom zero, everything zero. You can

use insert zero. Object cover. So object

fit is cover.

Okay. So image first of type is the first image. So the first image we will

first image. So the first image we will got size 15BW. This is our first image.

The only thing that is left is play button which will be our next thing.

Great.

Below our image we will have another image with a div rabbit. Okay. For this one, let's give

rabbit. Okay. For this one, let's give play bn.

Inside it, we will have an image. Let's

copy this one. Paste it here. Instead of

cycle task, this time we have a play SVG.

For the class name size is 3 PW. So the

size is relative to view port width or responsiveness.

And let's give margin left five PW. It is also the same. Perfect.

five PW. It is also the same. Perfect.

So we got our video ping HTML structure and then we will combine with gap animation to see how this thing will

happen. Finally let's do this video

happen. Finally let's do this video reveal animation together.

Of course you have probably seen this effect on a lot of those awards winning website. Now we are going to build that

website. Now we are going to build that same effect. But don't worry, I will

same effect. But don't worry, I will walk you through the simplest version ever so you can see exactly how it works. All right, so let's go to the

works. All right, so let's go to the video ping section component. As usual,

we will use use tub hook and inside it let's create a timeline for this tap dot timeline and in our v

object we will create a school trigger.

The trigger target here is video p section. So our video painting section

section. So our video painting section itself and starting value is minus 15% and from the top of the viewport. So

which my which is minus 15% means minus 15% means the top the animation start 15% above the top of the section hits

the top of the viewport. And if we do 15% is the animation start 15% from the top of the session hits.

Okay, it's not the same. 15% is from the top to below but minus 15% is from the top to above. All right, let's give an

end here. For the end value, we will

end here. For the end value, we will give 200%. So that means 200 view high.

give 200%. So that means 200 view high.

Okay. And the next value is top of the viewport. Great. For the scrapping,

viewport. Great. For the scrapping, let's also give 1.5 here.

And let's give markers equal to true.

Great. The secret is just only one property which is called ping equal to true. That just only one property. And

true. That just only one property. And

this is the secret source of our animations. Ping true means it will ping

animations. Ping true means it will ping the session in place while the animation plays to create a dramatic effect. Let's

see. So let's really animate our timeline. TL.2

timeline. TL.2

and we will animate this video box.

For the bus object we will animate a clip value.

For now, let's give an empty. And for

the easing, let's use a usual one. So,

power one in to create smooth easing for natural motion. So, let's animate the

natural motion. So, let's animate the clip art. Go to our clipping website and

clip art. Go to our clipping website and you can already see this is a cycle option in here. Uh this is the one that we want to uh animate like a cycle. So

at first our things will be something like this. You

can copy this value and here in our empty clipart sty

clip art this value right now our initial start is something like this not 0.5 is completely invisible at zero. Of

course, if you want to get a full cycle, you have to animate the first one. So

here, instead of zero, you will get 100%. Let's refresh everything. And when

100%. Let's refresh everything. And when

you click start, you got a expanding video painting animation effect. You can

see how really easy it is. So it will go do nothing and then it will expanding

again. Yes. Okay. Uh that's great. But

again. Yes. Okay. Uh that's great. But

instead of uh 0% instead of completely invisible our initial value is something like this. So let's replace 0 into 6%.

like this. So let's replace 0 into 6%.

Refresh everything. And you can already see here we can see something because our clip part starting point is 6% reveal and then reveal into 100% while

painting the video box. That's easy,

right?

Great. Uh let's do a responsive things in here. So here we will do this pinning

in here. So here we will do this pinning animation on the tablet on the medium devices and on the larger devices. But

for the mobile devices, we don't want to do this complicated animation. The

original website also removed this animation for the mobile devices. So

let's remove this animation for the mobile and we will replace just a simple video box. All right. So at the top of

video box. All right. So at the top of everything, let's create a is mobile variable. As usual, we will use a use

variable. As usual, we will use a use media query who from the read responsive.

And here in a query, we will include a mass width

value mass with 768 pixel. So this is a is mobile variable. We are using a media query code to check if the screen is

mobile size. The mobile size mean less

mobile size. The mobile size mean less than 768 pixel and if it is a mobile we

will skip this animation. Okay. So

let's select whole timeline and timeline animation.

Get it and include the if condition. If

it's not mobile we will play this animation. But if it's mobile we don't

animation. But if it's mobile we don't play this animation. Let's check it what will happen in our mobile devices. In

the mobile devices, okay, highlight title animations are working perfectly.

But for now, we got this because there is no animation on the mobile devices.

So, we have to change our clipot value also.

Okay. So, instead of getting this aesthetic one, we will do a conditional rendering on our styling.

Let's see in the clip part. If it is a mobile, do something. If it's not a mobile, do

do something. If it's not a mobile, do something. So if it's not a mobile, we

something. So if it's not a mobile, we got a D one. But if it is a mobile, we don't do any cutting. So it just

complete visible 100% like this.

Perfect. Reload

animations. highlight titles, animations working perfectly and then we got our

video box in and 100% clip art value. So

we don't cut anything. Great. So we got a responsive video pinning animation.

Let's go another exciting section.

Let's do this cool double painting layout animation and you got a parallel effect that is happening in the

background and this amazing cut stacking also it is a painting. So it is a double pinning component and when you hover the card the videos are playing and when you

move another card another video is playing when you mouse leave the video pause at that moment great let's do

that's amazing section close everything and go to our folder structure and close everything in our src and session folder we will create another section which is

called testy Mono section and type R A F C E remove import and as

usual last start with a section t for the class name we will give testimonial section

uh it got okay so let's see testimonial section in our CSS what does it work it got uh BGM color

position relative with full but for the height we got 128 deviation. So let's

import our testimonial section to the app GS6.

After the benefit section we will add testimonial section. Great. But here

testimonial section. Great. But here

let's do one more thing. Okay. In the

original website, you can also see that this video is covered by the testimonial section, right? So, it's kind of

section, right? So, it's kind of happening like a uh overlapping effect.

Testimonial section is overlap to this one. To create this effect, we have to

one. To create this effect, we have to do div like this. So, this is a pendic section. And after this video is played,

section. And after this video is played, this will be our testimonial section.

Right now things are not happening in a proper way. But we will see what will

proper way. But we will see what will happen and which things we are going to fix in the next testimonial section part. All right, let's go to the

part. All right, let's go to the testimonial section and inside our section chart create a div for the title

stuff. You know that for the background

stuff. You know that for the background parallax things happening these titles affect H1

and what's for the class name we will oh sorry we will give absolute stful stand for width full height full

from the t utility class and let's give flex but flux direction is column Just only give item center. We don't

want justifying center. Just only give item center.

Uh the final thing is petting top. This

time we will give five BW for the responsive. Great. And for our first H1

responsive. Great. And for our first H1 tag, let's give a test dash black. Here

you can already see this is our H1 tag and we got some color. And of course we will give a custom class which is called

first title so that we can animate these custom class name. Great. Let's copy

this H1 tag and paste it into another tool here. Instead of what we will get

tool here. Instead of what we will get everyone and the last one is talking. So

these what's and talking are black color but the middle one is test dash light

dash brown. So this is kind of like uh

dash brown. So this is kind of like uh brown color. Okay. So we got first title

brown color. Okay. So we got first title and second title and third title.

Great. So let's go to our indust CSS and you can already see things are already predefined in for the H1 tag. So let's

see what is happening. So it is uh it is a upper case and some font size line height spacing uh margin left value and

finally font bold. Yeah it's pretty simple. They are just basic CSS. Okay,

simple. They are just basic CSS. Okay,

let's go back to testimonial section and after that we will have our ping box which is for the testimonial

cards. So let's give a class name ping p

cards. So let's give a class name ping p go to index CSS. You can already see we have ping p class which is plus item center just to find center. So it is a

horizontally center and with full padding start as known as padding left is 52 absolute and some responsive

bottom value. Great. In our pin B we

bottom value. Great. In our pin B we will show our testimonial cards. I think

it should be around like seven or six cards. Uh okay. Do you remember our

cards. Uh okay. Do you remember our flavor section? In our flavor section,

flavor section? In our flavor section, we have flavor slider and uh so here instead of giving six di

array and loop through it to render these six di right. So in this section we will do that same approach.

Let's remove everything.

Okay. So to write JavaScript things we have to call the ki brackets and as you can see we have cuts array in our

constant JS and we will go through with the map and we will cut each cut also in this and

here create a DIB for it. Perfect.

Go to this one and this one. Oh, you can already see what's happening, right?

Okay. So, let's go to the constant folder indust.

And we have cats array.

It's pretty simple. We have the source and some custom rotation, some custom translation, different images and

different names. Great. Here our parent

different names. Great. Here our parent card is remove everything. We have to include some dynamic things. The first

one is BD cut. You can also see in the indust CSS. This is a BD cut class which

indust CSS. This is a BD cut class which is some responsive width plus nan to prevent shrink and stretch. I will show

you. So this is some uh rounded border

you. So this is some uh rounded border border radius different values and margin start overflow hidden position relative but for the mobile let's give

position absolute and I will show you why okay some um border width and border color so let's go here we will include

two things the first one is cut translation and the second one is cut rotation

great inside this parent diiv. Oh, don't

forget to add a unique key here. In this

case, we will use just index. Okay,

inside this div, we will only one thing that will be included this video. So for

the src uh remove a double quote and we will add our cut src

and play is in line muted loop. Yeah but we don't do auto play in

loop. Yeah but we don't do auto play in here. Do you remember that when we hover

here. Do you remember that when we hover on each card the video plays and when the mouse leave the video pause. That's

why we don't do auto play attribute true in here of it. Let's give some styling.

So class name and size it full. So width

100% height 100% with full height full object fit is cover. Perfect.

All right.

You can already see what is happening in here. Yeah. Let's play these videos. Uh

here. Yeah. Let's play these videos. Uh

so the thing is when the mouse move so when the mouse enter on this cut video will play and when the mouse leave the

video pause. To make this happen we have

video pause. To make this happen we have to use on mouse enter and we will call a

fun which is called handle play and we will give indas parameter to that function.

Let's create a handle play function in here. Constant handle play equal to that

here. Constant handle play equal to that will accept in this argument and let's do with arrow function. Okay. So in

react we have another advantage which is called ref.

For this if we don't have to go for the complicated way we don't have to go for manual selecting and manual figuring out

which video we are hovering for. Right.

We have a ref. So constant bdf equal to use ref hook from the react. here instead of

just uh vala we are using a ref array to keep track of each video element in the testimonial cast. So this let us play

testimonial cast. So this let us play pause dum when hovering over each card.

This is the simplest way. So let's give a video ref to our video tag raf and here

e l that will return video raf doc current and array is index

equal e. This is the way that we using a

equal e. This is the way that we using a ref to directly assess and control the video element. Okay, this is the way

video element. Okay, this is the way that we use ref array. Okay,

so on mouse enter we got handle play and on mouse leave we got hunter boss and as usual we will

give an index parameter to it. So let's

really start to write these two functions hunter play and hunter boss.

Go to our hunter play functioning constant video equal to video ref

current and in the array we got index let's console log of out this fast video perfect refresh everything we have to

remove these marker I think it should be in the benefitic section oh no it is in the video ping section marker true Remove this one.

Great. Refresh everything. And we got nothing. Okay. And let's go to our

nothing. Okay. And let's go to our testimonial cut session. Yes. Play this

animation. When you hover it, you got this one. Yeah, handle post is not

this one. Yeah, handle post is not defined. We have to define handle post.

defined. We have to define handle post.

But let's forget on this handle. Okay.

Remove everything. Uh let's this one. So

we got F6. You can already see this one.

F7. This one F5.

You do you see that? So we got different video cards that is related that we hover over. We got F6, F7, F6, F5, F3.

hover over. We got F6, F7, F6, F5, F3.

Perfect.

To remove these, let's define our handle pause bunching.

Great. It is the same thing. remove

everything and remove everything. When

you hover, you got F6 and when you out over out things are pretty simple. And we got our

video.

We only have to do a play method.

Similar, we have to do the pause method.

Let's see. Refresh everything. remove

things out and hover video play out video pause. Hover video play and out

video pause. Hover video play and out video pause. Right now you can't really

video pause. Right now you can't really see clearly. So maybe let's do things

see clearly. So maybe let's do things like this.

Yeah, that's pretty. Maybe remove this one is the same thing. Okay, I think we have to do a complete full screen version.

Let's go for it now. Let's start for the animation part.

All right. You can do in here in here.

But let's choose this place for our animation. Use Gab

hook. So here let's start with the initial setup. Gab.

initial setup. Gab.

Don't forot to import and set method.

The target is our testimonial section.

And I want to set the margin top value to minus 140 BH.

What does that mean? Let's see here. Do

you see this gap?

And in the original website, do you remember that this testimonial card session is covering on the video pinning

section?

This is what margin top walk. So let's

go back to our project and refresh everything. And you can see that we have

everything. And you can see that we have already got our covering layer effect.

So by defining the initial value with gaps set method this the margin top value of this is minus 140 VH it creates

a covering effect like this and we will paint this session when we arrive this and our cuts are stucking

and our titles are doing is parallel things in the background. Yeah. So let's

continue on our GUB animation. As usual,

we will create a timeline for our title first. So let's create a timeline and G

first. So let's create a timeline and G sub timeline in the V object.

Let's go for scroll trigger. So for the trigger target is the testimonial section itself. Yes, mostly

section itself. Yes, mostly itself.

So the next value is the start Y. It's

pretty simple. The top of the testimonial section and the bottom of the viewport. So the animation will

the viewport. So the animation will start when the top of the session reaches the bottom of the viewport.

Right? So here we will also define adding value. So it's 200%

adding value. So it's 200% and top. So the animation will end when

and top. So the animation will end when we have scroll 200% of the session's height. We'll have to set true to our

height. We'll have to set true to our scrapping property. So it tie the

scrapping property. So it tie the animation progress to the scroll position for smooth motion. We have

already done before many time. So let's

really create our timeline animation TL.2 two mat and our target is

TL.2 two mat and our target is first title of the testimonial section.

Do you remember our benefit section? It

also has first title, second title and third title, full title. If we don't do that, we have to give a very very specific title something like first

title of testimonial session is pretty long, right? So yeah, this is really

long, right? So yeah, this is really easier. First title of the testimonial

easier. First title of the testimonial section we can select like this for the

V object is symbol X person 70. Yeah. So

when the animation happens the first title will move 70% to the right.

Positive value is to the right and negative value is to the left.

So remove this semicolon and copy this two twin and paste it two more time because we

have three titles. First title, second title, and third title.

Great. Let's change our Xerson value.

For the second title, I will go for 25% and for the third title, let's go to the left. So give negative value 50%. That

left. So give negative value 50%. That

means move the T title 50% to the left for an alternating motion. Let's see.

Oh, don't forget to give markers true to see what is happening and where the start and end point. Got it. Refresh

everything.

You can already see things happening.

When you click start value, the first title goes 70% and the second title is only just like 25%.

But we don't got it because we have to wait uh one animation end and second

animation play and third animations. We

have to wait one by one to prevent this situation. We have already done before.

situation. We have already done before.

We have to use a overlap position parameters like this. Let's use in here again. Let's

this. Let's use in here again. Let's

see. Refresh everything in here. And

when you start it, things are going to moving simultaneously.

Okay. So that's a secret, right?

Overlapping parameters.

If this parameter does not exit, we have to manually calculate our delay effort, our duration, this time, right? We have

to manually calculate these duration and delay. But we just only this overlapping

delay. But we just only this overlapping parameters gap knows these animations will happen simultaneously.

Great. We got our parallelless effect title animation. So let's go for this

title animation. So let's go for this painting video card animation.

Right here let's create another timeline. So for this one I will call

timeline. So for this one I will call paint deal. So gstep dot timeline and in

paint deal. So gstep dot timeline and in the v object let's go for this code trigger. The trigger target is as usual

trigger. The trigger target is as usual it is a testimonial section. Testimonial

section. So let's remove this marker from our previous timeline because this time we would like to animate this card

not the title itself. So remove the marker in our previous animation for the starting value is 10% from the

section 10% from the top of the session and top of the viewport. So the

animation will start slightly after the session enters the viewport.

Okay, let's also give an under value. It

is the same 200% top. So 200% from the top of the

top. So 200% from the top of the testimonial section and it will end the top of the view.

Great.

Let's give scrap. This time instead of true, we will give a 1.5 for much smoother scrubbing effect.

And our secret sauce is paint is to true. Yes, don't forot to give markers

true. Yes, don't forot to give markers to true.

You can already see it is painting. You

can already see that right when you this start hit the scroller start. So this

10% from the testimonial section hit the top of the viewport. Our painting

animation is happening. Let's really

write our paint till animation.

This time we want to this time we want to animate the initial value. So let's

go with from the target is video cut.

So that video cut here this video cut.

Great. And for the vase object y% is 150. So I would like to go this

video card appear from 150% from its original position. So it will go from

original position. So it will go from this bottom right. Uh bottom 150%. Let's

give some sticker. It's 0.2. It's some

kind of like nice flowing effect. To get

this one, we will use our usual ease power one. Out. Let's see what do we

power one. Out. Let's see what do we got. Refresh everything. Don't forget to

got. Refresh everything. Don't forget to refresh because we have code trigger things. Okay. When you hit scroller

things. Okay. When you hit scroller start things will appear from 150% from original Y position. So it will appear

from the bottom one two and each things have ster value is 0 two. So thing video

our video cards are popping like a really nice flowing right.

All right. So currently right now every cut is stuck into one position.

Why is this happening? Let's go to our industs here.

You can already see we have this thing.

If the device is 2 Excel, so it is a larger device, we will start with position

relative. But if it's not, so some small

relative. But if it's not, so some small laptop or some tablets, iPad and mobile devices, the position is absolute. Let's

change this two Excel into the MD. You

can already see that this is what position relative me. But as you can see uh it is not good. Yeah, not responsive.

And we cannot also make like smaller video or something. So let's give two pixel. The original website is also like

pixel. The original website is also like this. Perfect.

this. Perfect.

So we got this one.

This tucking moment when the device is not a large device.

Let's see what is happening on the large device here. When you hit the pinning

device here. When you hit the pinning point, you got a nicely stucking cut effect. So, this is a cut stacking

effect. So, this is a cut stacking effect. 1 2 3 4 5 6 7. Yes. Everything

effect. 1 2 3 4 5 6 7. Yes. Everything

is going with the scrolling.

Great.

Hey hey hey.

So, this is our final piece of the website. Although this is pretty easy

website. Although this is pretty easy and simple, let's finish this project perfectly. Okay, let's go to our VS

perfectly. Okay, let's go to our VS Code. Remove everything and go to our

Code. Remove everything and go to our section folder. Create footer section

section folder. Create footer section GSA. Close this one. Type R AF CE.

GSA. Close this one. Type R AF CE.

Remove read import. Go to the app dot GSA. Now remove this fake spacer.

GSA. Now remove this fake spacer.

And let's add our footer section. Yeah,

this is our final piece. So let's do it quickly. In our footer section, as

quickly. In our footer section, as usual, we will replace with a session tag. And for the class name so it's

tag. And for the class name so it's called footer session. Let's see what is happening footer session in our indust

CSS. Okay. So for the larger devices is

CSS. Okay. So for the larger devices is minimum high DVH and overflow hidden position relative and some black background. Great. So uh let's start

background. Great. So uh let's start with an image.

It is kind of a dipping image for the photo section. We already use one

photo section. We already use one dipping image in our nutrition session.

Uh for now this is for the footer dip.

So in our public folder and in our images. Here we go. This is a footer

images. Here we go. This is a footer dip. Yanji. Close this one and paste it

dip. Yanji. Close this one and paste it here. For some styling is wage full and

here. For some styling is wage full and object is cover

a little bit translate y one. Great. And

let's refresh. Uh you can see this is a food dip pani. Uh yeah it's really visual appealing and to make you hungry.

Okay so let's go for another div. So

this will be a rep bar for everything that will be included video and our email our highlight many many stuff.

Let's go for it for the styling. So we

will have H110 DVH for the larger devices and position is relative. Let's do some

responsive petting top value 20 VH mobile devices just 10 VH

great inside this div let's start with our title as usual we will have H1 tag that is wrapped by the div and there we

have our overflow hidden so this one is index 10 okay so this H1 tag is uh let's

copy this H1 paste it here for the styling as usual we will give a general title test align it's center so test dash

center and we will get a make color let's give some padding y padding bottom also

padding y is five okay Here you can already see we got this one right. We have already got our

H1 tag and after that we will get a video. Okay. So this is a video tag.

video. Okay. So this is a video tag.

Inside it we will have our SRC and auto play

is in line muted but not loop. I will

show you why. For class name is absolute top zero object contain not cover here object

contain uh I would like to go for like mix blend lightening.

So this is a mix blend mode and the mode is lighten for the video. Close image

folder and open the video folder which is called splash. Close the ciper. Is it

here? Remove public. Yes, you can already see we got our splash video because it's a position absolute. It

doesn't have a relative height. Okay. So

after this video, we will create another div for our social media contact. And in

here we will include three div. You can

type like this. And inside each div, we will have an image.

And for the image wrapper we can do dashbtn. Let's copy everything. Okay,

dashbtn. Let's copy everything. Okay,

let's remove this string uh the first one correctly and then copy two copy and paste into two more is much easier and faster than our first technique for the

wrapper is pretty obvious because we will do a flex center and gapin is five position is relative Z index is 10 finally we will give some margin top

responsive value for the media devices let's give margin top 20 but for the mobile devices let's give margin top of five.

For the images, go to the images folder and the first one is yt.svg that means YouTube.

Copy our div and paste it. Social btn is the same class but we will have a different images. The second one is

different images. The second one is instaar the SVG and the top one is Tik Tok. Let's see what do we got.

Tok. Let's see what do we got.

So isn't here. Yeah, you can already see this is here. If you want to see what is really happening, I think you can give

for the photo session. Let's give

minimal height is deviate.

Yeah. So you do get like this.

Perfect. Uh but don't forget to remove this thing after everything is finished.

After this social media DII, let's do another DIIB that will hold our contact.

So some links and a form that can write your email. So let's create a parent

your email. So let's create a parent div. Margin top is 40. We will give some

div. Margin top is 40. We will give some responsive padding X movement device

padding X is five plus G 10. But in the media devices the direction should be row but for other devices the direction

should be colon. So first dash colon let's give justify between and then the color is test dash make

perfect we have to give a font family paragraph font dash paragraph the font size is in the median and larger devices

we will use test-lg the final thing is font dash medium that's why I give a predefined CSS for

these kind of basic stuff Because as you can see we have to type many things and these are just pretty basic stuff and

you guys are also bored in this stuff right but this is a final section so let's write it

inside our DIB we will have another DIV this thing is for the links okay so let's do

item Enter responsive gap. The median is gap 16.

responsive gap. The median is gap 16.

Mobile devices is gap five. Inside that

div, we will have this symbol links. So

after this one, let's create another div. Let's give some

div. Let's give some mass dash with LG. And inside it, we will get a P tech get exclusive Ali SSL

blah blah blah blah. And below that we will have our form something like this.

Okay, here you can see this is just a fake form. Yeah, if you want to do you

fake form. Yeah, if you want to do you can also watch our previous video uh using email gs but I don't think emailgs will be necessary for this one. Yeah,

let's do a fake. So it's pretty simple just to find between item center and let's give border B. So border bottom and let's give a border color uh some

padding y value and margin top. This is

a margin top 10. Yeah. So this is an icon. This is an input. Icon is arrow

icon. This is an input. Icon is arrow SVG and import type is email.

Uh there is only one thing to do left which is for the copyright. Let's do it.

After a long div, we will have another div that will include our copyright. So

this is a final rule and you can already see that this is some uh copyright blah blah blah and privacy policy terms of service. Yeah, that's it. That's all.

service. Yeah, that's it. That's all.

You can also check our footer session in the associs copyright brows is position absolute and some bottom value and

inside it the pup will be test- center.

So this is for the import uh CSS. Great.

Let's do one more thing. Okay, right now uh in the media devices kind of tablet in iPad uh we got our video but I want

to cut image just a static image for the mobile devices.

The last create is mobile use media query hook, you know. Let's copy it from our other sections.

I think it should be in the benefit uh video ping. Yeah, here. Copy it and

video ping. Yeah, here. Copy it and paste it in our footer section. So, if

it is a mobile, we will show a static image, not a video.

Here, if it's a mobile, we will show a static image. If it's not a mobile, we

static image. If it's not a mobile, we will show our video stuff here. Let's

add an image tag. Yeah, the src is let's go for to our images folder and the file name is footer drink. Yeah, footer

drink.png.

Copy it. Close it. Paste it here. Remove

public.

And let's give some styling. It is

position absolute top is zero and object is contain that's it. So if you refresh

and your device if the device is in the mobile let's refresh everything and we got this one. So to remove these do you remember we set our minimum high

deviation. Yeah for a better debugging

deviation. Yeah for a better debugging but now remove for it. Now we got the except footer with an a set height. No

extra height. Perfect. Do you remember in our final fashion the hero session got a video playing but for our website

it just only studied. Yeah, we only have to finish this one after this website is completely finished. So let's quickly

completely finished. So let's quickly replace our video. Go to the hero section and here let's create two

things. The first one is is mobile

things. The first one is is mobile of course. Let me copy it from our video

of course. Let me copy it from our video section and paste it here. And the

second one is is tablet. Yes. So use

media query hook uh for our query this time is the mass

width is 1024 pixel. We got two things is mobile and is tablet. Let's replace

our video. So this one instead of getting a steady image remove this one.

If let's start with is tablet version.

If it's tablet we will do something. If

it's not tablet we will do something. So

let's start with if it's not tablet you will get a video tag. But if it's target you we will get an image tag.

Perfect. For the video src, go to our video folder and you can see

there is the name hero bg.mmpp4.

Close this one and put it here. Remove

public folder.

Let's give some styling. Position is

absolute. Insert zero. That means top, left, bottom, right, everything is zero.

Width is full, height is full. You can

also do size full.

Object is cover.

Perfect. And we have to do auto play is true and muted

play is in line. Yeah. for our tablet because this is a tablet version we have to include our studied image. For the

tablet version we have to do another conditional rendering which is called add a re fragment.

So inside it we will include another condition which is called is mobile. If

it is mobile, we will show this image.

That's it. If it's not a mobile, we will show this image. Yeah. So, there is no error at all. Right now, this is a

tablet. So, it is not a mobile. So, we

tablet. So, it is not a mobile. So, we

will show this one. SRC.

Go to our image. And here you can see hero image png. Copy it and paste it here. Remove public folder. Let's give

here. Remove public folder. Let's give

some styling. Of course, position absolute. But this time we have to give

absolute. But this time we have to give bottom zero. You see? And last place is

bottom zero. You see? And last place is center. So left is 50%.

center. So left is 50%.

So if you do left 50% things going happen like this because this is push 50% to the left. But we can do something like this.

Translate X dash half. So translate by pushing back 50% from the translate X we

got perfectly center washing for the object fit is auto OPJ cg- AO auto.

That's it. So this is our tablet fashion. But for the mobile version,

fashion. But for the mobile version, let's go back to our images folder and take herbg.

Remove public folder. Of course, we have to give some styling.

Position is absolute from the bottom 40.

Size is full.

Object fit is cover. Let's see what do we got in our mobile devices.

Yeah, this is you can see the blurry image and when you are on the tablet you got this two bottles image and when you

are on the laptop on the larger devices you got this full video play profit.

That's it. Thank you so much everybody.

The cost is finally finished. If you

like the journey so far, don't forget to give like, subscribe, and drop a comment what you want to build next. Also, if

you have encounter some errors or issues or some difficulties, please join our Discord server. We can help you there.

Discord server. We can help you there.

Thank you so much everybody. Thank you.