Build and Deploy an Apple Website with React | Beginner Three.js & GSAP Tutorial

Learn to build and deploy an Apple iPhone 15 Pro clone website using React, GSAP, and Three.js with animations and 3D models.

Key Takeaways

GSAP enables complex, high-performance web animations with great flexibility and browser support.
Three.js simplifies 3D web graphics development by abstracting WebGL complexities and supporting advanced features.
Combining React with GSAP and Three.js allows building interactive, animated, and responsive websites like Apple's.
Deploying and monitoring web apps with Hostinger and Sentry ensures optimal performance and user experience.
Learning 3D web development requires shifting perspective from 2D to 3D space concepts (X, Y, Z coordinates).

What the video covers

The video teaches how to create a stunning Apple product website clone using React, GSAP, and Three.js.
It covers building powerful animations with GSAP including scroll triggers, staggers, and timelines.
Core concepts of 3D development with Three.js are explained to create animated 3D models and interactive scenes.
The tutorial includes creating a custom video slider with progress tracking and responsive design.
Deployment of the finished website to Hostinger's fast servers is demonstrated.
Performance tracking using Sentry is integrated to monitor user visits, load speed, and device-specific issues.
A free comprehensive guide on GSAP and Three.js with tips, examples, and project ideas is provided alongside the video.
GSAP is highlighted as a high-performance animation library used by major brands like Nike and Google.
Three.js is introduced as a user-friendly abstraction over WebGL for building immersive 3D web experiences.
The video emphasizes the transition from 2D to 3D thinking in web development for realistic interactive apps.

Chapters

What animation libraries are used in this tutorial?

The tutorial uses GSAP for high-performance animations and Three.js for 3D graphics and animations.

How does the video help with deploying the website?

It guides you through deploying the completed Apple clone website to Hostinger's fast servers and setting up performance monitoring with Sentry.

Is prior knowledge of 3D development required?

No, the video starts with core concepts of 3D development and gradually introduces Three.js features to help beginners transition from 2D to 3D web development.

Full Transcript — Download SRT & Markdown

Speaker A

Ever caught yourself endlessly scrolling through Apple's website, fantasizing about owning the latest iPhone? Yeah, we've been there. But have you ever wanted to actually create something as slick as what Apple showcases? Hi there, and welcome to a new video where I'll teach you how to build stunning apps like Apple does for its products.

Speaker A

you how to build stunning apps like apple does for its products yes we'll code an iPhone 15 Pro clone using nothing less than Gap and 3js but we won't just clone the site we'll start with a detailed craft course on how to

Speaker A

Yes, we'll code an iPhone 15 Pro clone using nothing less than GSAP and 3js. But we won't just clone the site; we'll start with a detailed craft course on how to create powerful animations using GSAP. After which, I'll teach you the core concepts of 3js and 3D development, and then you'll build the Apple clone website that has custom animations with scroll triggers, staggers, timelines, and more. A custom video slider with progress tracking, animated 3D models with different configurations, lights and viewports, and other sections with cool animations. Complete responsiveness and optimal performance.

Speaker A

tracking animated 3D models with different configurations lights and view ports and other sections with cool animations complete responsiveness and Optimal Performance will go beyond just building and deploy your website to hostinger fast servers but we're not done yet we'll also use Sentry to track

Speaker A

We'll go beyond just building and deploy your website to Hostinger's fast servers. But we're not done yet. We'll also use Sentry to track its performance, like how many people visit, how fast it loads, what users are looking at, and see if there are any issues with specific devices. Alongside the video, I've also prepared the ultimate 3js and GSAP guide that covers a step-by-step roadmap, insider tips, examples, and cool project ideas to take your animation and 3D development skills to the next level. The link to this completely free guide is in the description. So, are you ready to dive in and learn GSAP, 3js, and then put that expertise to work by cloning the iPhone 15 Pro website? Let's go!

Speaker A

step-by-step road map Insider tips examples and cool project ideas is to take your animation and 3D development skills to the next level the link to this completely free guide is in the description so are you ready to dive in

Speaker A

GSAP's animation platform, often referred to as just GSAP, is a high-performance JavaScript animation library that allows you to effortlessly animate anything JavaScript can touch. You can animate anything from UIs and SVGs to creating immersive 3D experiences. From exciting scrolling animations to changing shapes of objects, text effects, and UI interactions, there isn't a thing you can't animate with GSAP. Any exciting website you see with animations, parallax effects, or fancy scrolling tricks is likely made with GSAP.

Speaker A

JavaScript can touch you can animate anything from uis and svgs to creating immersive 3D experiences from exciting scrolling animations to changing shapes of objects text effects and UI interactions there isn't a thing you can't animate with gap any exciting

Speaker A

From making basic HTML elements move smoothly to creating entire animation timelines, morphing SVGs, customizing bounce and wiggly effects, simulating physics, and more, GSAP is the all-in-one solution for all of your web application animation needs. Gucci, Spotify, Nike, Shopify, and even Google all use GSAP. But there's also Framer Motion, known for its gesture-based interactions and its declarative syntax, which tightly integrates with React for simpler animations in React. It's the top choice. Both animation libraries have their own unique use cases, but here's where GSAP takes the throne.

Speaker A

all-in-one solution for all of your web application animation needs Gucci Spotify Nike Shopify and even Google all use Gap but there's also framer motion known for its gesture-based interactions and its declarative syntax which tightly integrates with react for simpler

Speaker A

GSAP is known for its exceptional performance even in complex animations. Its optimizations keep the animation smooth, making it the go-to choice for applications in which performance matters. GSAP also offers a high level of flexibility and control over animations, allowing you to create complex sequences, timelines, and effects. GSAP is extensively tested and supported across many browsers and devices, ensuring consistent animations for all users, even on all the browsers, and a rich feature set allowing you to do anything from simple effects to advanced physics-based animations.

Speaker A

choice for applications in which performance matters Gap also offers a high level of flexibility and control over animations allowing you to create complex sequences timelines and effects Gap is extensively tested and supported across many browsers and devices ensuring consistent animations for all

Speaker A

Now, let's move to the second most important technology in making our apps interactive. It's 3js, and it'll shape the future of the web. With advancements in virtual reality and wider access to more powerful devices, 3D development is just warming up. Before 3js, creating 3D graphics for the web was a complex task. Web developers had to rely on low-level APIs like WebGL or special plugins like Adobe Flash or Unity. Remember those? Which were a pain in the ass, with limited browser support and extreme use difficulty.

Speaker A

with advancements in virtual reality and wider access to more powerful devices 3D development is just warming up before 3js creating 3D graphics for the web was a complex task web developers had to rely on low-level apis like webg or

Speaker A

With the growing demand for immersive web experiences and increasing strength of modern browsers, developers needed a better solution for 3D apps. 3js came in and filled this gap by abstracting away the complexities of WebGL and providing a user-friendly API for building 3D scenes directly in the browser using JavaScript. Some of the key features are the abstraction of WebGL. 3js abstracts away all WebGL's complexities, providing a higher-level API that simplifies the process of creating and rendering 3D graphics. It has a high cross-platform compatibility, making apps work seamlessly across different devices and browsers.

Speaker A

better solution for 3D apps 3js came in and filled this Gap by abstracting away the complexities of webg and providing a userfriendly API for building 3D scenes directly in the browser using JavaScript some of the key features are the

Speaker A

It provides a rich set of tools and utilities for creating immersive 3D experiences, including support for lighting, shading, textures, animations, and interaction. It's also very fast. Using WebGL's hardware-accelerated rendering, 3js ensures smooth and efficient performance even for complex 3D scenes. And finally, it also has an active community of developers contributing tutorials, examples, and plugins, making it the go-to choice for developing 3D apps.

Speaker A

and utilities for creating immersive 3D experiences including support for lighting shading textures animations and interaction it's also very fast using web gl's Hardware accelerated rendering 3js ensures smooth and efficient performance even for complex 3D scenes and finally it also has an active

Speaker A

Starting to learn 3js is like diving into a new and exciting world with many features and concepts to learn. To properly learn 3js, you'll have to move away from the 2D vision and start seeing websites in 3D. In a 3D space, objects possess three-dimensional properties like length, width, and height, or in math, X, Y, and Z. Unlike the two-dimensional world which we typically interact with on screens, 3D space adds depth, allowing for a more realistic experience. Each point in a 3D space is represented by a set of coordinates that specify its position from the origin.

Speaker A

away from the 2D vision and start seeing websites in 3D in a 3D space objects possess 3dimensional properties like length width and height or in math X Y and Z unlike the two dimensional World which we typically interact with on

Speaker A

Now, I want to teach you the most important concepts in 3D development. First is the scene. It's the canvas where all the objects, lights, and cameras are placed; the environment in which the 3D world exists and where interactions happen. Then there's the renderer, which converts the 3D scene into 2D images that can be displayed on the screen. It's responsible for rendering the scene onto the browser. The camera plays an important role in defining the viewpoint from which the scene is viewed. It determines what is visible in the rendered scene. Cameras have properties like position, rotation, and field of view that determine their behavior and how the scene is rendered.

Speaker A

3D development first is the scene it's the canvas where all the objects lights and cameras are placed the environment in which the 3D World exists and where interactions happen then there's the renderer which converts the 3D scene into 2D images

Speaker A

3js supports different types of cameras with special behaviors, like a perspective camera, which mimics the way human eyes perceive the world, creating a sense of depth and perspective, and an orthographic camera, which renders objects without perspective, which is useful for technical drawings or 2D games. Lights illuminate the scene and affect the appearance of objects. 3js supports different types of lights, including ambient light, which adds overall illumination to the scene without a specific source; directional light, which emits light from a specific direction like sunlight; point light, which emits light in all directions from a single point in space; spotlight, which emits light in a cone shape from a specific position and direction; and there are many more. Lights have properties like color, intensity, and position that control their behavior and influence on the scene.

Speaker A

like position rotation and field of view that determine their behavior and how the scene is rendered 3js supports different types of cameras with special behaviors like a perspective camera which mimics the way human eyes perceive the world creating a sense of depth and

Speaker A

So now that we have the scene, the camera, and the lights, we can finally see some things within the space. And the first thing we can easily show would be a mesh. A mesh is the basic building block of 3D objects in 3js. It consists of vertices, points in 3D space connected to form faces. Meshes define the shape and appearance of objects in the scene, and each mesh is associated with a geometry and a material. Geometry defines the structure and shape of a mesh by specifying its vertices, faces, and other attributes. 3js thankfully provides a wide range of built-in geometries like box geometries, spheres, planes, cylinders, and more. You can also create custom geometries by defining their vertices and faces manually, which will later on allow us to see such a detailed 3D Apple iPhone model.

Speaker A

illumination to the scene without a specific Source directional light which emits light from a specific Direction like sunlight Point light which emits light in all directions from a single point in space Spotlight which emits light in a cone shape from a specific

Speaker A

Then there's material. Material determines the appearance of a mesh, including its color, texture, and how it reacts to light. 3js offers some built-in materials like mesh basic material, which is simple and is not affected by lighting; mesh phong material, which reacts...

Speaker A

see some things within the space and the first thing we can easily show would be a mesh a mesh is the basic building block of 3D objects in 3js it consists of vertices points in 3D space connected to form faces meshes Define the shape

Speaker A

and appearance of objects in the scene and each mesh is associated with a geometry and a material geometry defines the structure and shape of a mesh by specifying its vertices faces and other attributes 3js thankfully provides a wide range of built-in geometries like

Speaker A

box geometries spheres planes cylinders and more you can also create custom geometries by defining their vertices and faces manually which will later on allow us to see such a detailed 3D Apple iPhone model then there's material material determines the appearance of a

Speaker A

mesh including its color texture and how it reacts to light 3js offers some built in materials like mesh basic material which is simple and is not affected by lighting mesh Fong material which reacts to some light sources and then the

Speaker A

standard material which is a physically based realistic rendering and there are many other materials as well which you can customize by adjusting properties like color opacity highlights and more and these were all the basic building blocks of 3js and 3D development of

Speaker A

course you can find their detailed instructions alongside a cheat sheet in the guide down below but 3js also has some more complicated stuff like shaders tweaking with meshes and animating things around I'll show you how to animate 3D models using Gap in this

Speaker A

video but going into detail on all of these things would make this video too long so if you want a full crash course on 3js just drop a comment and let me know and before we dive into the main

Speaker A

star of this video which is of course cloning the 3D Apple website with 3js and GAP let me provide a conclusion on this part of the crash course which is how to use 3js there are a couple of

Speaker A

ways in which we can use 3js depending on Project requirements and your preferences you can use 3js directly in vanilla JavaScript without any additional libraries or Frameworks all you have to do is put a CDN script tag for 3js but of course you can also

Speaker A

integrate 3js with Frameworks such as react View and angular each one of these has its own way of integrating 3js we'll use react 3 fiber which is a library that allows us to easily integrate 3js into react applications and it even

Speaker A

makes it possible to create 3D scenes with react components so just so you know you'll learn react 3 fiber in this video as well so just to give you an example in Manilla JavaScript you would have to first set up the scene by saying

Speaker A

scene camera and renderer figure out where you want to render the canvas and then add a cube to the scene and maybe even a plan animation in react 3 fiber it's much easier and much more similar to what you're used to you simply import

Speaker A

the canvas and the used frame from react 3 fiber and then you import the box or some other element you want to show and call it using Hooks and show it with react components react through fiber acts as a wrapper which makes it easier

Speaker A

to add 3D scenes to our react applications enough with Theory let's dive into action I prepared a quick workshop for you and I've linked it for you in the description download it open it within your Visual Studio code and

Speaker A

then we can install all the necessary dependencies by running mpm install this is going to take just a moment as we don't have too many dependencies as a matter of fact we can look into what we do have and you'll notice that it's

Speaker A

basically just react react Dom and react router Dom with some Tailwind CSS so the entire setup is completely empty we'll explore everything from scratch so let's go ahead and run the application by running mpm run Dev to see what we we

Speaker A

have on it and then we can hold the command key and click on this link to open it up as you can see I prepared seven different demos that teach you seven most important Gap Concepts so let's dive into the first one by

Speaker A

clicking right here and let's explore gp. 2 gp. 2 method is used to animate elements from their current state to a new state it's similar to gp. from but the difference is that the GP 2 method animates elements from their current

Speaker A

state to a new state while Gap from animates elements from a new state to their current state and of course you can read more about it if you head over to the documentation page basically you can see how it works right here you

Speaker A

target a specific element by providing the identifier and then you specify the properties that you want this element to take after the animation runs so we are changing the rotation and the exposition throughout the duration of 1 second so

Speaker A

now you've seen the demo right you could have done on your own without me but see this box right here now we'll animate it together to solidify what we just learned so going back to the code we can

Speaker A

split our terminal and install a new package by running mpm install Gap as well as at Gap SL react which will allow us to start adding those animations once that is done we can head over to our pages and then Gap 2 as that is the

Speaker A

first element we want want to animate in this case I want you to animate the box that we have right here below so if you scroll down you can see a div that has a class name of VW HW and then BG blue 500

Speaker A

which makes that a box and here we have an ID of blue box so let me teach you how to animate using Gap in react right below this too we can say use Gap coming from Gap react this is a special hook

Speaker A

which looks and behaves a lot like use effect essentially you define a callback function and then a dependency array on when this has to run and within it you can use Gap to then animate the elements you want so we do that by saying gap

Speaker A

which you have to import from the original Gap package dot 2 and then the first parameter to the do 2 method is the target you want to animate in this case we can Target it by ID by saying

Speaker A

blue box then the second parameter are variables which you want to animate so you can expand an object and let's do something like X is 250 pixels so we animate from X of zero of course by default to X is 250 so now if you go

Speaker A

back to your page and reload you can see how nicely this animates and just so we can see our animation happening in real time at all times without needing to real below the page we can add a repeat

Speaker A

of minus one as well as a yo-yo property set to True which will make the animation reverse on every other cycle so as you can see now it's going back and forth let's pull this to the side so

Speaker A

we can continue animating while we're writing the code at the same time there we go that's much better now let's also give it a bit of a rotation property of 360 and you can see now it completely rotate and you can see now it completely

Speaker A

rotates we can also increase the duration to something like 2 seconds if you do that it's going to move much slower and we can also give it a special ease property which defines how the animation happens as you can see

Speaker A

immediately you get a lot of different properties you can choose from for example bounce in if you save it you can see now it kind of bounces in and then stops you also have bounce out which is going to make it bounce at the end

Speaker A

there's a lot of these different easing curves that you can decide to use there's also Circle back and so much more in this case let's use elastic as you can see it looks like it's on a spring right now which you have to pull

Speaker A

and then move back and forth which gives it a very interesting effect but with this in mind you just learned how to use one of the fundamental methods in gsap which is gap. 2 property which accepts an ID which is an identifier and then

Speaker A

properties you want to apply to the element you're targeting you also learned how to apply animations using the used Gap hook and GAP within react so with that in mind let's go back to the homepage and navigate to the second

Speaker A

method of the day Gap from as the name suggests gab from is used to animate elements from a new state to their current state similar to gab 2 but the difference is that the from animates from the new to the current while gup 2

Speaker A

animates from their current to a new state of course you can find more information within the docs but for now let's implement it in action I'm going to go back to gap. 2 and copy this entire part then I'm going to navigate to Gap

Speaker A

from and simply paste it right here below of course not forgetting to import the used Gap as well as Gap now if we modify the method from to to from and modify the D from blue to green and save

Speaker A

you can see that it started moving from the back and then going to the front in this case let's explore a bit of a different ease one I like to use often which is power one.in out this one

Speaker A

starts with a lot of power and then slows down as you can see it right here but the most important thing is that now it starts from the position 250 pixels in if I reload see how it started from

Speaker A

the right side moving to the the left that is the only difference between from and to the next method of the day is Gap from to which as the name suggests is used to animate elements from a new

Speaker A

state to a new state similar to from and two methods but the difference is that here you can Define both States so if we scroll down we can copy the entire thing we have here and navigate to from two so

Speaker A

let's paste what we copied import the hook as well as Gap we can modify the method from from to from 2 and you still pass a specific identifier but this time you have two different objects you can modify we have

Speaker A

the first object which is the from object and then we have the two object which accounts for the two properties we want to implement so let's try to animated from an X of zero and a rotation of zero with something like a

Speaker A

border radius of 0% as well and we're going to animate it to 250 repeat minus one and let's also add a border radius of 100% And we can also modify the ease to something like bounce out to explore another one now if we modify the

Speaker A

identifier from Green Box to Red Box and save it now you can see how it turns from a square into a circle and then comes back so we're modifying the rotation and the X and the Border radius to zero at the start and then at the end

Speaker A

we set it to 100 which essentially makes it a circle this is pretty useful when you want to modify both the start and the end of an animation with that in mind those have been the three base Gap

Speaker A

methods but let's explore what else we have in store next one on the list is the GP timeline and the GP timeline is used to cre create a timeline instance that can be used to manage multiple animations again it's similar to two

Speaker A

from and from two but it is used to manage multiple animations while all of these manage just one element from their current state to a new state of course we can open up the docs to learn a bit

Speaker A

more about it and in this case you can see that they consider it a sequencing tool that act as a container for the other animations we have explored it allows you to have complete control and manage the timing of an

Speaker A

animation so instead of doing something like this first do x 100 then do y50 and then change the opacity to zero you can create a timeline and then you can modify the elements to move on that timeline you can also control the whole

Speaker A

thing easily by pausing it resuming it reversing it and so much more so with that said let's animate this yellow box and also include the play and P pause button so we can navigate over to Gap timeline and you can see at the bottom

Speaker A

as we always do there is a div that has an ID of yellow box so first things first when creating a timeline we have to Define it by saying const timeline is equal to gap which you have to import

Speaker A

from gap. timeline and then you call it like this next you can also pass the options object to give it some properties like repeat minus one repeat delay of something like 1 second and yo-yo to true we already learned what this does

Speaker A

it simply makes the Box move left and right it simply makes the animation repeat so we don't have to reload the page to check out the animation now that we have the timeline defined we can use the same use Gap hook we have used not

Speaker A

that long ago Define the Callback function as well as the dependency array now within it we can use the timeline.

Speaker A

two property instead of using the gap. two property and it works in the same way you have seen it before it's just timeline. 2 you then Define the identifier which in this case is the yellow box and the second parameter are

Speaker A

the variables you pass to it such as the x is 250 rotation is 360 border radius is 100% duration is is two and then ease is back do in out again this doesn't matter too much right now but we're just

Speaker A

playing with the way that the animation actually executes so if we save it now you can see how it goes from one end to another and comes back now what we can do is we can also say timeline. 2 again Target the same yellow

Speaker A

box and then provide another set of variables we want to apply to this anim such as X500 scale of 1 rotation of 360 border radius of something like 8 pixels duration of two and ease of back. inout now if I save this you can notice that

Speaker A

it's yellow and then it goes further out of the screen I'm going to zoom this out a bit so you can see the full animation first it goes to 250 Waits a bit and moves to the end and then it returns now

Speaker A

this is a bit similar to using the from and two or the from 2 but what this allows us to do is to add additional animations in the middle so we can say timeline. two once again where we target

Speaker A

the yellow box and this time we can for example do the Y of 250 scale of two rotation of 360 border radius of about 100% And and duration of two as well as the ease back do in out now if we save this we have

Speaker A

added a third animation to the mix where now it will actually go down out of the screen move back and then it's going to come back again so these animations are happening in a row one after another which gives you a lot of possibilities

Speaker A

to control the entire timeline now another thing you can do here is of course play and POS it because you have complete control over the timeline so let's head over to our play and pause button which is right here and let's

Speaker A

expand this on click functionality we can define an if statement and say if timeline. paused is true then we want to trigger the timeline. playay and also else vice versa then we want to run the timeline. pause so if we do this and

Speaker A

Save now you can click play pause and completely pause the execution of the animation then you can trigger it again and it works so I think you can see the benefits of running animations within a timeline you have more control now let's

Speaker A

move over to the fifth method in the gsap repertoire stagger Gap stagger is a feature that allows you to apply animations with a staggered delay to a group of elements by using the Stagger feature you you can specify the amount

Speaker A

of time to stacker the animations between each element as well as customizing the easing and the duration of each individual animation this enables you to create Dynamic and Visually appealing effects such as staggered Fades rotations movements and more and of course you can find more

Speaker A

within GP stagger documentation they even prepared a little video but in essence it is as easy as using the Stagger property so let's explore it in action by navigating over to the Stagger file in this case if you scroll down you'll

Speaker A

notice that we don't have a single box with an ID of box rather we have multiple divs that all have the same class name stagger box so instead of Simply using an ID we'll use the class name as an identifier so same thing goes

Speaker A

we can use the use Gap hook create a callback function and then we can use the gap. 2 method and in this case we can import Gap from gsab now you might say hey we already learned two but we haven't used

Speaker A

stagger well stagger is just a property you can apply to any animation so we'll use two to show this out to explain the Stagger by targeting the Stagger dashbox and then we can provide the options in this case we can do the same thing we've

Speaker A

done before such as y of 250 rotation of 360 border radius of 100% to turn it into a circle we can add a repeat of minus one as well as a yo-yo of true now if we save this you can see they all

Speaker A

follow the same animation as we're targeting all of the elements simultaneously but what if we want them to animate one by one well in that case we can provide a stagger property of 0.5 let's say so now we can save it

Speaker A

and you can see that now after half a second each one of this animates one after another but it doesn't end there we can also apply more complex stagger Properties by defining stagger as an object here you can provide the amount

Speaker A

which is the amount of time to stagger the animations between each element and we can say something like 1.5 then you also have access to something known as a grid grid selects the number of columns and rows in a grid so you can say

Speaker A

something like 2 1 then there's also the axis and you can choose the axis along which to stacker the animations in this case we can say y but you could also say X in which case they all happen at the same time next

Speaker A

you can also apply the ease which in this case we can do something interesting like Circ do inout and now kind of they happen in a circle and finally this is the most interesting one you can Define the from which is the

Speaker A

starting position of the staggered animation so instead of starting from the start or the end we can say Center so this will make it start from the central staggered box as you can see now it happens from the start and moves until the end and

Speaker A

you can also see how they're doing two and then one and so much more so you have complete control over how you want to stagger your elements this is great so now you know how stagger works and how you can use it when you have

Speaker A

multiple Elements which you want to animate and let's call it a dance of sorts the next feature on our list is the scroll trigger which is used to trigger animations based on the scroll position so as you scroll you can

Speaker A

animate specific things once you reach a specific point in time so for example scroll down to see the animation and then only after you reach a specific point we want the animation to start so let's first open up the documentation

Speaker A

page and I always advise you to read the docs for anything you're doing there's also a quick video right here and the simplest way is to attach a specific Target which when it enters the viewport or the screen then the animation happens

Speaker A

or you of course have much more control over when what over when the animation triggers in this case we can go back and go to Gap scroll trigger and let me show you how to implement it first of all

Speaker A

it's very important to note that gsap scroll trigger is a plugin which means that we have to initiate it at the top by saying import scroll trigger from Gap all and then you can do gap which we have to import from gap.

Speaker A

register plug-in and then you pass that scroll trigger this will make it work next with triggers you also have to define a ref a reference so we can say scroll ref is equal to use ref coming from react this is not Gap ated this is just

Speaker A

react then we can use the same old use Gap hook coming from Gap react which we can Define like we have done so far now in this case if you scroll down you'll be able to see that we have some boxes

Speaker A

right here now if you scroll down let's attach that ref to our boxes so if we scroll here you can see that we have two boxes the scroll pink and scroll orange and we can attach a ref to this div

Speaker A

wrapping both of them by saying ref is equal to scroll ref like this now we can scroll to the top and we can start animating so first let's get access to those boxes by saying const boxes is equal to

Speaker A

gap. utils do to array and to it we pass the scroll ref. current. children so this is how we can get the children using a react ref next we can also run the boxes do for each so for each box we

Speaker A

want to do something and that something will be a simple gap. 2 animation where we target each individual box and for each one we apply some specific properties in this case we can say x is something like 150 rotation is

Speaker A

360 border r I is something like 100% scale is 1.5 we have learned that already right so now if we scroll down you can see that they basically already turned into circles even though we didn't see it at all because we were at

Speaker A

the top when the animation was happening not too useful right typically you want to have some animations when you scroll up to a specific point like if we're here we can see it sure but the user will come from top and then we'll start

Speaker A

viewing this at the bottom so this is where scroll trigger animations come in to this gsap 2 property we can apply a scroll trigger which is an object to which you can pass a trigger and then this one

Speaker A

will be a box so one specific box comes into view we want to start the animation let's see that once again if I start scrolling down already it's a circle but that's because we're missing something important we're missing the start of the

Speaker A

animation which we can Define as bottom bottom so when the bottom of the Box hit the bottom of the viewport then it will animate and we can also Define when it will end and it will end when the top of

Speaker A

the box hits 20% of the viewport we also have something called scrub which we can set the true which makes the animation smooth and below the scroll trigger we can also Define the ease of power one do and out and the reason why the scroll

Speaker A

trigger animations are not working is because I misspelled it as scroll instead of scroll with a double l so if we fix this now check this out I'm going to scroll to the top reload the page and start scrolling down so now as we enter

Speaker A

the viewport slowly you'll see how this starts as a box because that's what it Styles say by default and then slowly it starts moving to the right and it starts applying the rotation border radius and scale as we scroll check this

Speaker A

out interesting right and also it goes back immediately now another thing is that since we're mapping over those boxes we can apply a bit of math to each one so instead of just moving it x 150 for each one we can multiply that by

Speaker A

boxes do index off a specific box so this will already apply it a bit differently because the second one has an index of one and we can also give it some default value like plus five so now if we start scrolling down you can see

Speaker A

how nicely they animate and exit out of the screen we come back they are back and of course you can keep playing with these value like top 30% which will make them go away much sooner or like something like top 10% which will make

Speaker A

them in the screen for a longer period of time it's up to you to start playing with this and I just noticed we don't need a comma right here it's just bottom bottom so like this yeah that's great

Speaker A

another thing you can add when you're animating using the scroll trigger is if you go all the way to where you end the used gep function which is here you can also provide a second parameter of scope is scroll

Speaker A

ref like this that way it will know exactly when the animation has to happen so now I'm sure you have already noticed how useful GP is specifically simple properties like G step two staggering and so on but only when you pair it with

Speaker A

scroll triggers which we'll do a lot within this video and it's also covered in a lot of depth within our ultimate guide which you can find in the description down below completely for free you notice how it all starts coming

Speaker A

together when you combine all of these properties and finally we have Gap text where I'm going to teach you how to animate text elements with gap so to animate text you can use all the methods we have explored so far the only thing

Speaker A

you have to do is integrate the text plug-in you can see it in the docs basically you can add the GP 2 and then add the text you want to animate you also have some special properties for animating text elements so let's head

Speaker A

over to text and you can see an H1 here that says gsap text but it's nowhere to be found on the screen it's kind of like it's being hidden right and that's because it is at the start the opacity

Speaker A

is zero so let's go ahead and adding made it in we're going to use the same old tips and tricks like use Gap coming from Gap react where we have our callback function then we will Define gap. 2

Speaker A

which we have to import from Gap we target the text element by ID of text and then we provide some properties like ease which will be power one.in out once again you can go without this or you can

Speaker A

find the ones that you like and then add different eases and then I'm going to add opacity of one as well as y of zero so this is nothing new right we're just changing some properties using gsap 2

Speaker A

and you can see how nicely it slides in great now let me also teach you how to animate the paragraph you can see this par class name right here it combines all of these properties that you can see

Speaker A

so let's add a gap Dot from two in this case and and we can Target the do Para which is the paragraph and then as you know with from two you have to Define two different objects and at the start this text is

Speaker A

visible we didn't apply an opacity zero like we did here so you can apply it here in from opacity z y of 20 and then of course it's going to break until you provide a second object where you can

Speaker A

reset the opacity to one and Y to zero so now you can see how nicely it fades in we can also apply other things we learned such as the delay between the elements as well as the Stagger of

Speaker A

0.1 so now different paragraph elements are going to animate one after another and with that we came to the end of this little Gap Workshop as I said we go into more detail on all of these and many

Speaker A

other more advanced Gap properties within the ultimate Gap and 3js guide which you can find below so check it out and get warmed up for the main star of the show which is diving a bit into 3js and then combining

Speaker A

the 3js knowledge with your gep knowledge and building something on your own it's one thing to watch me do things and then enter a couple of methods and it's a completely different thing to build something truly useful and

Speaker A

replicate what some of the best companies in the world do so how do you feel about these Gap features we'll explore everything in more detail later in the video Gap also offers plugins for physics and motion that allow you to

Speaker A

create animations with realistic physics-based motion such as bouncing elasticity and acceleration and yes I know we covered a lot of ground regarding Gap in a short amount of time which is exactly why I prepared a complete GP guide and cheat sheet down

Speaker A

below so download it and save it somewhere for reference it's completely free also leave a comment down below if you're interested in a more detailed and more Advanced Gap crash course but with that said that's enough Theory so let's

Speaker A

get started the first step in building our app is setting up our hosting I want to teach you how to deploy this incredible app to the Internet so everyone can see what you've built see the app you'll buil today isn't just a

Speaker A

project it's a career asset it's designed to Showcase everything you're capable of making you an attractive candidate for any job I highly recommend hostinger for this app they're offering an amazing deal right now I'll go for the business plan here's why it's

Speaker A

perfect for this project you get up to five times increased performance free SSL for https security which builds trust with anyone visiting your website you also get a free domain name giving your website that professional touch and a free CDN to speed up your site it

Speaker A

ensures that your website loads quickly improving the user experience and because we've partnered with hostinger you get an even bigger discount so click the special link Link in the description click claim deal and add to card here we

Speaker A

have to choose the period of our hosting and I'll choose 48 months to save the most down below you can choose your payment method and enter your JavaScript Mastery coupon code which gives you the biggest available discount on your

Speaker A

hosting package and once you purchase we are ready to set everything up right within hostinger guided setup it's asking guess what tool we want to use WordPress with AI or the hosting your website builder in this case we are real

Speaker A

developers so we're going to click skip as we want to develop our own website and I love this UI as you can see I'm using hostinger to host our official JS mastery. proo website there you can check out our ultimate nextjs course or

Speaker A

if you're a bit more advanced the JSM masterclass let's try something like JSM phone.com and it is available so I'm going to click right here and of course you can choose your own preferred domain name click next and once your domain

Speaker A

registers you'll also be able to choose where your website target audience is so that way it loads fastest for them I'm going to leave it as the default and click next while our hosting is getting set up I just want to let you know that

Speaker A

there's a complete GitHub repository for this project so if you ever get stuck or if at any point something is not working for you as it is for me within the video come here refer to the code base and fix

Speaker A

it also don't forget to give it a star our hosting has been set up at the end of the video we'll deploy it using the file manager with that said let's dive right into the code to get started with

Speaker A

building our amazing 3D Apple website we'll begin from beer Beginnings by creating a new empty folder on our desktop I'm going to rename it and call it applecore website and then drag and drop it into an empty Visual Studio code

Speaker A

window once you do that we are ready to set our project up to quickly get ready with our development environment we'll use vit it will allow us to quickly spin up a react application with a lot of interesting things provided out of the

Speaker A

box like the instant server start optimized build hot module replacement and more but of course if you want to build this project out with another technology like Vue angular or even better nextjs I would be more than happy

Speaker A

for you to do that you're going to learn even more by building it in your technology of choice so with that in mind we'll use vit and with vit we'll also use Tailwind CSS which is a utility first CSS framework packed with utility

Speaker A

classes for easier styling so with that in mind let's go to Quick Search and let's search for vit or your own preferred framework once you're there we can copy the command and quickly get started with our application back in our

Speaker A

editor I'm going to press controll backtick which is a shorthand for quickly opening up the terminal or you can go to view and then terminal once you're there you can pick paste the First Command that we copied but I'm

Speaker A

going to change my project with Slash which will ensure to create all of the necessary files and folders right within the new Apple website folder we created so press enter it's going to ask us whether we want to install the create V

Speaker A

CLI to which we can say why yes and then run mpm install to install all the necessary dependencies and once that is done let's follow the next steps right here you want to install all of the necessary Tailwind config so let's copy this mpm

Speaker A

installed Tailwind CSS post CSS and auto prefixer paste it here and press enter let's also initialize a tailin project next we need to update our template paths by copying this content navigating over to Tailwind Doc config.js and by the way Pro tip the way

Speaker A

I just navigated is by using command or control and then P you can start typing and you can immediately press enter to navigate in another file or of course you can use your mouse and go right here with that in mind I'm going to update

Speaker A

our content and then we can follow the next step which is to add tailin CSS directives to our CSS by copying it going to our index.

Speaker A

CSS removing everything and pasting just these three tailin directives once we have that we can add a simple H1 to our app so let's navigate to our app.jsx remove everything from the return statement like this and simply return a simple H1 while we're here

Speaker A

let's also remove all of the other things that we don't need and we can also remove the app CSS as well as removing that file as it's creating clutter there we go we can also rename this to an es6 plus arrow function

Speaker A

there we go so now that we have this let's reopen up the terminal and run mpm run dev then you can hold command or control and then click right here to open it up on Local Host 5173 and we are in we can see that the

Speaker A

text is enlarged underscored and bolded which means that Tailwind CSS classes are getting applied properly now let's turn this empty canvas into this a modern 3D Apple website with gsap animations and 3D models and before we begin another Pro tip for new developers

Speaker A

out there you might notice that my browser is looking a bit weird this is not your typical Safari or Chrome bookmark bar I'm using a new browser called Arc which is very convenient and allows you to focus on what matters it

Speaker A

is of course built on top of chromium so you always have all of the typical Chrome features you're used to and they're available for Mac OS and as of recently for Windows 2 and no this is not a promotion I just wanted to share

Speaker A

it with you in case you're interested and before we begin setting up our file and folder structure we have to set up our linting that will include es lint and prettier so in the description down below I created a special guide

Speaker A

containing the configuration that I personally use on all of my projects and the guide will look something like this it is a 22 page PDF that covers es length prettier in Visual Studio code for both react and nextjs starting from

Speaker A

the introduction on what eslint even is and why do we need it and then moving on to a complete setup using nextjs but what you're more interested in for this video is the setup for react all of that

Speaker A

is included in this simple PDF and once you get it you'll also be added to JSM weekly which is our official newsletter where every single week we share some news from the web development World there is no ads just fresh information

Speaker A

on react nextjs and web development in general so download the guide implement the linting and we can continue now let's set up the base file and folder structure and The Styling for our project first things first we want to

Speaker A

navigate over to the Tailwind Doc config.js and here we want to set up some basic colors so we can go under theme and under extend then extend the colors that's going to be an object where we can add a color blue which is

Speaker A

going to be hash 2997 FF now every time you want to add a specific color you just say blue you don't mention these six random characters and alongside adding the blue we also want to add a couple more colors

Speaker A

and to quickly add them just click the read me link in the description navigate over to Snippets and then here you can find all the Snippets for this video as you can see there aren't many the first one is the Tailwind config JS alongside

Speaker A

adding the blue we're also adding a couple of variants of gray for our different text elements and a zinc color so let's copy this entire snippet and let's simply override what we have here the second thing we want to add when it

Speaker A

comes to styling is the index.css so expand it copy it and then back within our code navigate to index. CSS and override everything we have here you'll notice we have about 120 lines but all of these lines are helper classes

Speaker A

providing some text colors text variants and more so if we scroll all the way up you can see we're targeting the body by making some default modifications and then adding some utility classes like nav height BTN color container and more

Speaker A

we'll refer to these throughout the build of this video but these are in no way all the Styles will be using in this video you will write all of the Styles yourself these are just some helper classes to get us going next in our file

Speaker A

tree we also have the assets folder which for now simply contains the react. SVG icon we want to remove that assets folder go back to the readme within links and then download our own assets containing all of the assets for the

Speaker A

build of this phenomenal Apple website including the 3D model will be using so click the link here and simply download it from our Google Drive it's going to say we cannot scan it for viruses but I think you can trust me on this once you

Speaker A

download it simply delete this public folder right here and then drag and drop the new one into the root of our directory click copy folder and here you'll notice that we have our 3D models as well as the Assets Now to quickly use

Speaker A

these assets within our code we're going to create a new folder called utils and within the utils folder we'll create a new file called index.js back in a read me you can expand this index.js copy it and paste it right here

Speaker A

you can notice that here we're basically importing all of the images and then exporting them so that we can quickly use them within our project and the last last thing we need are the constants these are some predefined arrays of

Speaker A

information like content or text that we'll use within this project for example see this enter A7 Pro gamechanging chip back in our app you can see where this text goes so what we're doing here we're preparing the content for the entire application

Speaker A

everything from nav items to footer items and more so let's simply copy it and within the source folder create a new folder called constants and create a new index.js file and paste everything we copied and as you can see

Speaker A

there's zero logic happening here just content which we can consume when we actually develop our website so with that in mind let's prepare for the development by going into our index.html and let's modify our icon we can go from V SVG to a new icon coming

Speaker A

from our asset asss that's going to be public assets images apple. SVG so 4public SL assets slimes slapp apple. SVG and we can also change the title of our application to Apple iPhone and save it now if we go back to

Speaker A

the browser you can see that now we have this great looking Apple icon as well as the title and we're ready to turn this into this so let's dive right into the development I'll start by diving right into our

Speaker A

app.jsx we want to remove this H1 and instead turn it into a main section and give it a class name equal to BG Das black then within here we want to have a couple of components such as the knv bar

Speaker A

the hero section and the highlights I think that's enough to get us going so let's create these three as components by creating a new components folder and within there creating a new file called navbar jsx inside of where

Speaker A

we can run rafc and press enter this will quickly spin up a new react aror function component called navbar and if this didn't work for you you need an extension called es7 plus Redux react native Snippets so simply install it and

Speaker A

it should work alongside the nav bar we're going to also get our hero section by saying hero. jsx with RFC and we'll also get our highlights component where we can run our afce now we have three most important

Speaker A

components well maybe second most important as our 3D model is the star of the show so now let's go back into the app let's turn these three into a self-closing and self- calling components and let's import them at the

Speaker A

top by saying import navbar coming from SL components slnb bar and we can duplicate this three times and rename the second one to hero and the third one to highlights finally let's see if we can see anything in our browser I'm going to pull our

Speaker A

browser to the side and my code Editor to the left now if I zoom this in a bit you can see that we have our navbar hero and highlights which gives us a lot of room to start working on stuff so let's

Speaker A

get started from top to bottom with the first component of the day the nav bar to start developing it we can transform this div into an HTML 5 semantic header tag and within it we can render a new

Speaker A

nav tag this nav will render an image and that image will have a source equal to Apple IMG like this we can import that Apple IMG at the top by saying import Apple IMG coming from do/ UTS if

Speaker A

we save it you can see the Apple logo appear instead of the text that says says navbar let's give it an L tag of Apple a width of about 14 and a height of about 18 within this image we're

Speaker A

going to have a div within this div we want to render all of our nav items and that's going to be damic so we're going to have an array of something like let's say I don't know phones we can also have

Speaker A

MacBooks and we can have something like tablets and we're going to map over this array by saying that map where we get each individual nav item and its index and for each one we want to immediately return a div that will render that

Speaker A

specific nav item this was supposed to be a comma there we go so now we can see phones MacBooks and tablets we can also give this div a key equal to the index that we're mapping over or in this case

Speaker A

we could also just make that the nav text itself because we know that it will always be unique finally going below this div we want to create another div which will contain an image this image will be the search image so we can say

Speaker A

source is equal to search image coming from utils I just automatically imported it by pressing the enter key so you can see it got it from here and we can also give it an Al tag of search as well as a

Speaker A

width of 18 and a height of 18 as well we can duplicate that below and we can also get the bag image from utils in case we want to buy something of course I'm going to change the alt to bag if we

Speaker A

save this you can also see the search and the bag all very minimalistic as Apple always is so now that we have the layout of our navigation bar let's start adding the Styles I'm going to give our header a

Speaker A

class name equal to w-o so it takes the full width of the screen padding y of five to give it a bit of a padding top on small devices padding X of 10 to divide it a bit from the sides usually

Speaker A

padding X of five we're going to give it a flex container like this where we want to justify the items between and items Das Center to vertically align them in the center of the screen more importantly we want to make our inner nav a class name

Speaker A

of flex which will immediately make all of the items go one next to another we also want to give it a w full so they span across the entire screen and we also want to give it a screen Max width

Speaker A

so this will ensure that it takes the full width of the screen now if we go into our index.css and at the top search for this screen Max width you can see that I misspelled it as scrim so let me

Speaker A

just say screen Max width and that way this will be applied and it will give it a Max width of about 1,120 pixels now let's style our class items by giving them a class name of flex that's going to make them go one next to

Speaker A

another Flex off one Justified Das Center and on Max Das small devices so devices with a width of 600 and less we want to make it hidden because they don't all fit right so we can eventually expand it but for now we cannot fit them

Speaker A

all also it's not good to have this content right here and mess the content with the actual jsx which we're presenting so with that in mind we can import this content from the constants by saying import nav lists from do/

Speaker A

constants that way instead of rendering this entire array here we can simply say nav lists. map and this nav list contains store Mac iPhone and support we cannot see it now because we have hidden it on small devices but of course if we

Speaker A

expand it you'll be able to see that it's there of course I need to zoom out quite a lot there we go and go back great now let's style each one of our list items by giving it a class name

Speaker A

equal to padding X all five and it might be good to come back to larger devices so we can properly see it there we go that's more Apple like let's also give it a text- smm so a bit smaller curs Das

Speaker A

pointer so we know they're clickable text- gray there we go because we don't want it to take away from what's in the middle of the screen we want them to buy the items on Hover we're going to make

Speaker A

it a text off white and we're going to give a small transition Dash all so that it nicely animates as you hover over it there we go that is looking great now we can go back to a smaller screen and we

Speaker A

can start the icons to the right side by styling this div and giving it a class name equal to flex items Das Baseline gap of seven in between the elements on Max small devices justify end and on Max

Speaker A

SM devices again Flex of one so this is going to make the items nicely appear on the right side of course if you want to you can also add a hamburger menu but for now this is looking it to me and of

Speaker A

course it looks great on desktop devices as well this was just a super quick Navar which means that we're now ready to start focusing on the hero section so let's hold our Command or control and then click into the hero section to

Speaker A

start developing it our hero section will be just that a section so we can write section and then we can also give it a class name of w-o for full width nav height which will make it come below

Speaker A

the Navar BG of black and position of relative now within this section we're going to display a div with a class name equal to h-5 over 6 so this is a height of about 83% as you can see right here I can see

Speaker A

it because I have a Tailwind CSS intellisense extension installed if you don't see this you might want to install it but now what does this mean you can see that now it pushes the highlights below which means that the section is

Speaker A

taking the full height of the screen let's also give it a w- fo a flex Das Center and a flex Das Co so the elements appear one on top of another within it let's render a P tag and let's make it

Speaker A

say iPhone 15 Pro there we go in the middle minimalistic as Apple does it and let's give it a class name equal to hero- tile now as you can see this hero title got completely hidden away as soon

Speaker A

as we added this class name why is that well if you're wondering what are the Styles applied when we give a specific Tailwind class you can always copy the name of that class and then head over right here paste it and find it within

Speaker A

the index.css and here you can see that we are applying some things like text Center font semi bold text 3 XL to make it bigger text Gray 100 but hey what is this why are we applying an opacity of

Speaker A

zero why are we hiding it well looking at the deployed site might give you a hint let me reload so you can see it at the start the text wasn't there but then it popped up that means that initially

Speaker A

when a hide this piece of text but then we want to animate it in so let me teach you how to do that using Gap Gap is probably the best and a widely robust JavaScript animation Library build for

Speaker A

professionals let's scroll down a bit to see what they're about they are going to allow you specifically yes you because you're watching this video to effortlessly animate anything JS can touch so smooth performance and you can focus on the fun stuff animate literally

Speaker A

anything it looks great it feels great I think I'm sold right let's see how we can use it back in our code we can open up our terminal split it to get a new one and run mpm install Gap as well as ADD Gap SL react

Speaker A

and press enter this just installed all the necessary libraries and it allowed us to import two things import Gap from Gap and import use Gap coming from Gap SL react now right at the top we can call this use Gap hook like this just as

Speaker A

you would call any hook and to it you provide first of all the function containing your animations and then dependencies when it is running so here we're going to have a callback function and then as the second parameter we'll

Speaker A

have an empty dependency array within here we can then use the base Gap to animate something specifically we're going to say gap. 2 so we want to animate two specific values we know what the default values are right the text or

Speaker A

rather the lack of text right here as the opacity is zero so given that we know that fact we can now Target this element by a class or an ID and then give it a new value that it

Speaker A

will animate to so in this case I'm going to give this P tag an ID equal to Hero but you might as well Target it by a class name if it's Unique then say hash hero as it's an ID and then here

Speaker A

provide an object of the property you want to give it once it animates so that's going to be in our case opacity of one now if I save this you can see how it nicely animated it was very quick

Speaker A

though but you can also play with the delay or the duration in this case let me set the delay to something like 1.5 seconds so if I do this you will notice that once you reload there's nothing for

Speaker A

1 and 1/2 seconds and then it animates in and with that my friend you have just implemented your first Gap animation pretty simple right trust me we're going to get into much more complicated GP animations but be happy that you've done

Speaker A

your first one for now now the second thing is to get this video playing right here and yes it's a video although you would never assume so so going below our P tag we can render a div and that div

Speaker A

will render a class last name equal to on medium devices width of 10 over 12 which is about 83% and usually width of 9 over 12 which is about 75% within there we can render an HTML video tag like

Speaker A

this and we can give it a source this source is a self-closing tag that will have an SRC property of video SRC like this which we can import at the top by saying import Hero video from do/ utils as well as small Hero video why

Speaker A

small well that's because we'll have two versions of the video depending if we're on desktop device or tablet or if we're on the phone so let me show that to you in action we can reload this screen and

Speaker A

you can see that here it's very small and narrow perfectly fits on your phone but if I go to a desktop device and reload you can see that here we have a horizontal iPhone turning around how cool is that

Speaker A

exactly like on the Apple website so to achieve that we first have to figure out the width of the screen and for that we can use a use State hook and we can call it video SRC so video SRC and and set

Speaker A

video SRC exactly what we have here under this Source then here we want to figure out what is the inner width of our window and we can do that by saying window.

Speaker A

inner width and if it's lower than 760 pixels then we make the video Source State equal to small Hero video else we make it just a typical Hero video video and of course we have to import use state

Speaker A

from react now if we go back to our current application and reload you can see that something happens in the middle but not too much happening yet so let's also give it a type equal to video SL MP4 and in the video tag let's give it

Speaker A

auto play muted as we don't want any sound plays in line will be set to true and we want to give it a key to this video which will be equal to video SRC if I save it you can see the video

Speaker A

started playing and it doesn't even look like a video we can also give it a class name equal to pointer-events dnone so nobody can click it or mess with it so now if I save it looks great but if I expand my screen oh that's not

Speaker A

good right so let's make it dynamically modify the video depending on the width of the screen we can do that by saying const handle video Source set like this and this will be a function that's simply going to look into the inner

Speaker A

width of the window by saying if window. inner width is lower than 760 pixels then we want to set the video source to small Hero video and else we want to set the video source to be the big hero video or just

Speaker A

Hero video and now we can connect that to our use effect so let's create a new use effect hook like this with an empty dependency array and don't forget to import it at the top then we can say

Speaker A

window. addevent listener and we're listening for resize of the screen and whenever we resize we want to call the handle video set source and in react it's very important to clean up your event listeners as well which you can do by returning a function

Speaker A

inside of which you can run window. remove move event listener resize and that's going to be the handle video Source set like this so this way you can notice that on big screen we're playing this wonderful looking horizontal iPhone and on smaller screens

Speaker A

we're playing this great looking smaller screen iPhone how cool is that so now we can collapse these functions and we can scroll down to start adding our call to action button to actually purchase this gorgeous iPhone so let's head below the

Speaker A

video and Below two more divs and let's create a new div which will have an ID equal to CTA as in call to action and it will have a class name equal to flex flex-all so the elements appear in a

Speaker A

column items D Center to Center them on the screen opacity of zero and Translate - y-20 I think you already know why I added the opacity zero right we're going to animate it and I also added the translate for the same reason this is

Speaker A

simply going to translate it by 80 pixels to the bottom on the Y AIS so later on we'll be able to animate it so that it flies up the screen so within this div we can create an anchor tag

Speaker A

that will have an href of hash highlights it's going to lead us to the Highlight section and we can give it a class name equal to BTN here we can simply say buy now of course we cannot see it yet and below

Speaker A

this one we'll also add a P tag that will say from 199 bucks per month or $999 if you're purchasing right away we can give this P tag a a class name equal to font dormal and text- excl to make it a bit

Speaker A

bigger but now I have a small task for you figure out how to animate this Viv including the anchor tag and the P tag hint it's going to be happening within our used gab hook so pause this video

Speaker A

and give it a try what we can do here is once again call the gap. 2 function and then Target the hash CTA ID and we want to animate to the opacity of one and we want to also push it a bit up

Speaker A

by giving it a y AIS of minus 50 which will push it up and we can also give it a delay so that it happens hand inand with the animation of our H1 so we can say 1.5 seconds now you can see how both the

Speaker A

iPhone 15 and the buy button and the text animate in at the same time with the video so let's reload and see it all in action the video shows up and then iPhone reveals itself and then we have

Speaker A

the pieces to buy the text but hey we don't want to buy it before we can actually see the iPhone right so let's bump up the delay to about 2 seconds save reload the video shows up the iPhone comes up and then at the same

Speaker A

time the buy button and the iPhone text shows up how cool is that I'm very excited let's also check this out on the entire screen by reloading checking it out and there we go the text is here as well who would

Speaker A

have said we have already developed the Animated Hero section of the Apple iPhone website but of course don't go just yet as we have many more interesting things coming up such as this cool section where you can actually

Speaker A

move through different sections playing different videos and it all feels like it's a part of the website you can also go down and then see the entire 3D model and you can move it around also you can change the colors and you can get to a

Speaker A

bigger screen version as well how cool is that so with that in mind let's focus focus on developing the second section of the day which is this animated highlights section I'm going to bring my browser once again to the side close the

Speaker A

hero and the index and navigate into our highlight section to get started with our highlight section we can turn it into a section and give it an ID of highlights so that we can then scroll through it from our homepage that way if

Speaker A

we click buy later on will be able to see the Highlight section now let's also give a class name to this section of w- screen which will give it a full width let's give it an overflow of hidden so we don't see any

Speaker A

scroll bars h- full for full height common Dash padding for paddings and BG Das zinc for this nice looking background color it's very similar to this full black but just a bit different let's create another div right within

Speaker A

this section with a class name equal to screen Max width and within it let's create another div that will contain our H1 so here we can create an H1 with an ID of title so we can soon enough

Speaker A

animated let's give it a class name equal to section dashe heading and let's say get the highlights of course if you buy the iPhone you get the Highlights so we cannot see it right here as right now if we check the

Speaker A

section heading in the class names you'll notice that we apply the opacity zero and translate y20 so it's actually hidden so to get it showing you know what we need to do we can use the use Gap hook like this from react callid

Speaker A

provide a callback function and an empt array then we can say gap. 2 where we animate a title and we animate it to the opacity of one and a y of zero to reset its position and of course we can

Speaker A

import Gap from Gap now if we save this you can see how it not only shows up but it also comes from the bottom to the top great now we can style this div within which we have this H1 by giving it a

Speaker A

class name of MB of 12 for margin bottom we can also give it a w- full items Das end and justify Dash between this way we'll have the highlights on the left and something else on the right especially on bigger devices

Speaker A

what I'm referring to are these two little pieces of text on the final website which is this watch the film as well as watch the event links so let's add those by creating a new div directly below the H1 that div will have a class

Speaker A

name equal to flex flex-wrap items Das end and a gap of five directly within it we can render a P tag and this P tag will say watch the film and then we can give this P tag a

Speaker A

class name of link and right below the text still within the P tag we want to render an image this image will have a source equal to watch IMG coming from utils with an ALT tag of watch and a

Speaker A

class name equal to margin left of two now if we save this and go back to our current version of the application we cannot yet see it as we're not really animating it in so what we can do is

Speaker A

also run the gap. 2 this time we're going to go for the do link class name and we're going to animate it to opacity of one y of zero and save once we do that you can see watch the film here now directly below

Speaker A

we're going to duplicate it and create another link that's going to say watch the event and here we can say write IMG coming from utils and this will be right now it looks like it comes below the highlights but we want it to appear on

Speaker A

the right side so what we can do here looking at this div it looks like the items end and justify between properties haven't been implemented because it doesn't have the flex display so we can say on medium devices and

Speaker A

larger we can give it a flex display and this will make the links appear on the right side but now pay close attention you can see that they all appear at the same time whereas on the finished side

Speaker A

you can see how they slowly animate in one after another so to achieve that look and that animation we can give it first of all a duration of one to increase it a bit and then a stagger of

Speaker A

0.25 stagger will ensure that they only stagger one after another all of which have the same class name or the same selector in this case that link we have a link here and we have a link here so

Speaker A

now if we go back you can see highlights first then the film then the event great so with that in mind the top of the Highlight section is done but of course now the fun part begins we can

Speaker A

focus on the video Carousel component something that you don't really see often so to create it let's go below the speed tag and Below two more divs and create our own custom video Carousel component by going to components saying

Speaker A

video Carousel do jsx run rafc and then go back and run the red right here video Carousel and self Clos it of course we have to import it at the top by saying import video Carousel from slide Carousel now you can see it right

Speaker A

here I'm going to collapse it as we'll be doing it for mobile devices as well which means that we can now dive into the video Carousel and start implementing it this one will be quite complex trust me we're doing quite a lot

Speaker A

of stuff here a lot of animations and a lot of different videos which we need to scroll through at the same time so let's first wrap everything into an empty react fragment and then have a div right below this div will have a class name

Speaker A

equal to flex and item stash Center immediately within it we want to map over all of our highlight slides by saying highlight slides like this coming from do/ constants so if you look into it you'll notice that this is essentially an array

Speaker A

of a couple of different objects each one of which has an ID a list of text elements such as the chip the video and the video duration we'll use all of this information to display all of these videos one by one and it's not just a

Speaker A

video it also has text that we show alongside that video so we want to map over those slides and then for each one we get a list also an index and then we automatically return something when I say automatically return I mean just

Speaker A

have parentheses here and not curly braces that means immediate return for each one we want to return a div and we want to close it that div will have a key equal to list. ID and it will have

Speaker A

an ID of slider within it we can have a div which we need to close and it will have a class name equal to video- Carousel uncore container and we can save it so now if we scroll down we cannot see anything

Speaker A

yet but if you type something within it you can see test test test test which means that we are properly displaying four different slides now where we have the ID of slider we also want to give it a class

Speaker A

name equal to on small devices padding right of 20 and usually padding right of 10 that's just going to provide some spacing so you don't see the other slide while the first one is not completed within this div we can render another

Speaker A

div and that div will have a class name equal to w- full h- full Flex D Center rounded -3 XL overflow hidden as we don't want to see those ugly scroll bars we'll animate it to slide over different ones and then BG of black now

Speaker A

you can see this black rectangle where the video will go so right within this div let's create a video tag that will have a source within it like this and that Source will have the SRC property of list. video with a type equal to video/

Speaker A

MP4 and now we get our first video right here but of course a video cannot yet play we need to make it play automatically so let's give a couple of properties to this video such as ID of video so we can later on target it plays

Speaker A

in line like this will be said to true we're going to also give it a preload class of Auto muted and that's it for now now as you can notice it's not going to start playing yet that's because we

Speaker A

want to play it using some animations more on that later but for now let's create the layout around each one of these slides we're going to go below this video and Below one more div and create one last div that will make

Speaker A

this slide this div will have a class name equal to Absolute because we want to absolutely position that text on top of her video with a property of top 12 left Dash inside of square brackets 5% and the zindex of

Speaker A

10 within that div we're going to map over our list texts by saying list dot text lists map where we get each individual text and for each one we automatically return a P tag with a key equal to let's do

Speaker A

text and it's going to display text you can see enter A7 Pro gamechanging chip groundbreaking performance let's style it a bit by giving it a class name equal to on medium devices text- toxcel usually text- excl and font Das medium

Speaker A

there we go this is how it looks like it's going to be much better once we actually start playing the video too first I'll create some refs or references to specific elements so we can keep track of the video we're on I'm

Speaker A

going to start by saying const video ref is equal to use ref coming from react and at the start it will be set to an empty array I will repeat this two more times call the second one video span ref and the third

Speaker A

one video div ref we'll have to manipulate and play with a lot of these different elements now that we have these refs let's also create a state for the video by saying use State snippet and call it video and set video and at the start it

Speaker A

will be equal to an object don't forget to import US state from react this video will have some properties like is end at the start set to false start play at the start set to false as well right the first one is not

Speaker A

yet playing we have to figure out which one is playing so for each video we'll have to know when to trigger this and when to turn it to true then we have the video ID at the start set to zero is last video will be

Speaker A

set to false at the start and then is playing at the start set to false we'll need answers to all of these questions and periodically we'll have to switch it on or off now just so it's easier to

Speaker A

work with these pieces of data we can immediately destructure those values by saying const and then getting the is end is last video start Play video ID and is playing which is equal to video we have essentially just extracted those values

Speaker A

or destructure the values so we can then use them without saying video dot video dot video dot great so now let's create a use effect so we can start playing those videos this use effect is of course coming from react so we have to

Speaker A

imported and it will be a callback function and we of course need to have a dependency array we will recall this use effect whenever the video ID changes or whenever the start Play variable changes so what will we do in this video well

Speaker A

first we have to figure out where are we in our video playing Journey so we can say const current progress is equal to zero and then we have to get the span element of the currently playing video by saying let's span is equal to video

Speaker A

span ref. current more on that later finally if we have that span of a specific video ID then we can start animating it here will animate the progress of the video remember what that is if I go to the

Speaker A

finished website and reload you can see how nicely this progresses for the entire video duration and then opens up a new one so we'll do that soon but first let's just focus on getting the videos to play in the first place to do

Speaker A

that we can say let anim which is short for animation is equal to gap which is coming from Gap do2 where we get a span and then the video ID of that span and then as the second parameter we provide all of the

Speaker A

options as you know options don't necessarily have to be just properties that we animate like opacity or Y or x axis it can also be specific functions like on update what will happen once the animation updates which is a callback

Speaker A

function the second one we can have is oncomplete what happens if the animation is complete in this case since we're working with a much more comp complex animation we need to keep track of all of these values but this animation specifically

Speaker A

has something to do with the progress tracking which we're not doing yet so we'll get back to this very soon for now let's create another use effect on top of this one and this use effect will deal specifically with the playing of

Speaker A

the video so it can be retriggered whenever the start Play Changes whenever the video ID changes the is playing or the loaded data that loaded data is a new used State Property which we can create right here use State

Speaker A

snippet loaded data set loaded data at the start equal to an empty array more in this soon so what are we going to do in this use effect well here we can say something like if loaded data do length

Speaker A

is is greater than three then if not is playing we can say video ref. current video id. pause so if we came to the end and if we're no longer playing then pause it else if is playing is true then if start

Speaker A

Play is also true then video. current video id. playay so we we find a specific video we want to trigger and we play it this by itself won't yet start our first video and that's because we haven't yet given it any refs so moving

Speaker A

right here below to our video we have to give it a couple more properties first of all let's give it a ref equal to here we're going to have a cack function where we get the element and we want to

Speaker A

say video ref. current I is equal to element like this so we're finding a specific index in the video refs array and setting it to this current video element then on Play We want to call a callback function where

Speaker A

we want to set video where we get previous video information so prev video and then based of that information we automatically return so you have to do parentheses and then curly eres the spread of the previous video so

Speaker A

dot dot dot prev to get everything we have there but this time we turn on the is playing to be equal to true so on play we spread all the information about the video but we said the is playing the

Speaker A

true I know this is getting a bit more complicated so if you have already gotten stuck or if something is not clear don't worry you can code it with me if it doesn't work like it should at the end of this video Carousel portion I

Speaker A

will also provide you with a complete code for the video Carousel so even if something breaks during the process you still got to watch it learn from it and then you can paste it have it working and then explore exactly what we're

Speaker A

doing now that we have only the video it's kind of hard to see when the next one should be playing or what's happening with the video duration so why do you say that we also implement the Js X for this progression tracking and this

Speaker A

button too which we can use to pause it and then we can continue with getting the video to play so with that in mind we can scroll down go below here where we're rendering text go all the way

Speaker A

until the bottom and then here we want to create another div this div will have a class name equal to relative Flex Center and a margin top of 10 to divide it a bit from the cont content above within it we want to have

Speaker A

another div that will have a class name equal to flex Das Center padding y of five padding X of seven background gray of 300 backdrop of blur and rounded Das full this will create this rectangle pill like shape so we can track our

Speaker A

progression within there we want to go video ref. current. map where we get each video but we don't need to do anything with it so we can just call it underscore as it's usually the practice and then you can also get the

Speaker A

index for each one of these video refs we want to immediately return a span element and that span element will have a key equal to the index and we also need to give it a ref this ref will also

Speaker A

be equal to a cack function where we get the element and then we set video div ref. current index is equal to element so we're going through a couple of these and whenever we have a new video we add

Speaker A

it to this video div ref array we also want to give it a class name equal to margin X of two to create some margins W of three for width h of three for height you can see how the pill is changing

Speaker A

shape BG gray of 200 there we go now we have four of these different dots rounded Das full relative cursor Das pointer within each one of these we want to create another span element that span will have a class name

Speaker A

equal to Absolute so it will be absolutely positioned h- full for full height w- full for full width and rounded Dash full to this one we also want to give a similar ref as to the above one so we can simply paste the ref

Speaker A

and change it from video div ref to video span ref and we can self close this span right here there we go that should look something like this wonderful and finally let's create the button to pause or reset it like we have it right here

Speaker A

while it's playing you can pause it and else if it's done you can reset the progress so going below this pan and Below one more div we can create a button that will have a class name equal to

Speaker A

control- BTN you can see the button appear right here we can render an image an IMG tag right within it with a source equal to if is last video then we render the replay IMG coming from utils else if

Speaker A

it's not playing so if not is playing then we render the play image else we render the pause image so we're using a double Turner right here for the alt property we can check if it's the last video then we say replay else if it's

Speaker A

not is playing then then we say play else we say pause so this little button has three different functionalities play pause and replay and let's give it a Click by saying on click we want to check if it

Speaker A

is the last video then we can call a callback function which we will call handle process and pass it a string of video reset this will temporarily break her application but don't worry about that then if it's not is playing like this we

Speaker A

can then call another callback function calling the same handled process function but this time with the play action and for the last time we're going to call the same handle process but this time with a pause action so now you

Speaker A

might be wondering what is this special handle process function and from where will we import it well this is a function which you will create so let's scroll up right here and let's create it right below this use effect by saying

Speaker A

const handle process which accepts the type of the action we want to make and the index and we're going to open up a switch case so I like to use a switch whenever there's multiple cases so switch based off of the type of the

Speaker A

action and if the case is video end in that case we're going to set video state by getting the previous video State spreading it out by saying do dot dot previous video is end will set to true and we're

Speaker A

going to increment the video ID by setting it to I + 1 looks like I missed a closing errow right here there we go now we're good so this is if we're at the video end and don't forget the break the second case

Speaker A

is the video last so if we're the last video but not yet end here we also want to call set video and we're going to also get the previous video which I guess we can shorten for just pre previous video

Speaker A

right here pre and then we want to immediately return something by first spreading the previous video and then adding the is last video to true because it's the last one of course don't forget to break it let's add another case which will be

Speaker A

video reset where we can also basically duplicate this set video and instead of saying is last video we will say is last video is false and we're going to reset the video ID to zero let's break it and finally and most

Speaker A

importantly we have a case of play so we want to play the video and here we can again duplicate this set video paste it below and say is playing will be the opposite of previous do is playing and that's basically the only

Speaker A

thing we want to do we want to break it and at the end default we can return the video so here we handled all of the different actions that we could ever do with that video that is great but still

Speaker A

not a lot is happening on the screen right so let's use Gap to bring it all to action right at the top after we destructure everything from our video we can use the used Gap hook like this coming from Gap react where we provide a

Speaker A

callback function and here in the dependency array we're going to add the is end and the video ID so that we update stuff whenever the video ID changes here we want to animate the video to play when it is in the view by

Speaker A

saying gap. 2 we're going to select it by the ID off video and we want to provide it a couple of things first we're going to provide it a scroll trigger like this so once this thing is in view then we trigger it once what is

Speaker A

in view well the video ID what do we do then well toggle actions so do something and we're going to say restart the video this is when it first comes into the view and there are many different cases

Speaker A

when it comes to the view from the top or from the bottom in other cases for now we're going to say none none none we're only interested in making it play once it first comes into view after the

Speaker A

scroll trigger once we're complete with the video we want to have a callback function and we want to set video to be equal to where we get the previous one immediate return da da pre by spreading the previous state start Play will be

Speaker A

set to true and is playing will also be said to true now if we save this this by itself won't yet start playing the video which is fine but what will is the use of our loaded data so the reason why we have

Speaker A

this loaded data is because here in the original use effect we are checking if the the load of data exists and only if it does only then do we start playing so what we have to do is create a new

Speaker A

function right here const handle loaded metadata equal to and this function will accept the index as well as the event we pass into it and it will simply call the set loaded data it will take all the previously loaded data so

Speaker A

pre and it will automatically return an array da do pre and then the new event we have added with this handle loaded metadata we can now attach it to our video player so going to the video we can say

Speaker A

unloaded metadata and basically what this means is this will get triggered with the event once the metadata of the video has loaded so once it got the data we get that event and we call the handle loaded metadata and pass the index as

Speaker A

well as the event this Handler will call this function which will in return call our state Setter and once it's in there this use effect will trigger the video play so let's save it and reload and as you can see the video is

Speaker A

now playing let's check that out one more time on full screen so if we go here on full screen you can also see the videos which will soon play so let's reload and there we go the video starts

Speaker A

playing but nothing is happening with the animation here and once it ends we're not seeing the next video so let's make that happen as well and once again if you reached this point and if you're watching this and if this part is very

Speaker A

confusing don't worry about about it at the end of this entire segment I'll provide you with the entire video Carousel code so you'll be able to continue having the complete working code but still you will have learned a

Speaker A

bit about how setting up more complex video animations works now that we've got our first video playing let's also implement the way to track the progress of that video we can do that right here I believe we even added a comment for

Speaker A

ourselves there we go animate the progress of the video so here we can say cons progress is equal to and we can use the math. seal method and then get the anim do progress so this is directly built into gap which allows you to get

Speaker A

the progress of the animation how cool is that and then you can multiply that by 100 to get the percent we can say if progress is not equal to current progress then we want to update it by saying current progress is equal to

Speaker A

progress and of course this current progress has to be a let and then we use a gap. 2 functionality where we target a specific video div ref which is the container for this dot which will soon turn into a

Speaker A

progress Handler dot current of this specific video ID and then we're going to modify its width by saying width is window. inner width is lower than 760 if that is the case then we're going to make it something like 10

Speaker A

VW for mobile else if window. inner width is lower than 1,200 then we're going to make it something like 10 VW that's for tablet and else for laptop we're going to make it for VW so if we do this you can immediately

Speaker A

notice how it expands which is great but still we have to animate the progress bar so let's go below and say gap. 2 span of that specific video ID we're going to modify the width and we're going to do it

Speaker A

dynamically by setting it to current progress and then percent like this and we're going to change the background color to white so if we now save it you can see how nicely if you reload it animates and moves further of course now

Speaker A

it only lasts for the duration of the animation which is a couple of seconds but now we want to actually modify the duration to be exactly as the duration of the video so let's navigate to our oncomplete and check if is playing in

Speaker A

that case we want to say gap. 2 video div ref. Curren video ID we're going to modify the width to 12 pixels so only if it's playing its 12 usually it's going to be just a DOT so on complete we bring it back to a DOT

Speaker A

and also gap. 2 we're now targeting the span of a specific video ID like this we're going to change the background color to be equal to Hash AF AF AF of course we must not end this right here we must end it right here

Speaker A

below so if we now save it you can see how quickly it starts and then gets back let's go below this on on complete so that's going to be all the way here and also exit this animation so exit curly

Speaker A

brace and parentheses here want to say if video ID is equal to zero then we want to restart the animation by saying anim do restart so this is a utility Handler given by Gap and finally now we want to modify

Speaker A

how long the animation lasts by saying const anim update which is going to be used to update the progress bar here we can say anim progress and bear with me we'll have to do some math we have to get the

Speaker A

video. current video ID divided by highlights slides video ID do video duration so we divide those two times and that should give us the progress then we go down and say if is playing then gap. ticker and ticker is used to

Speaker A

update the progress bar do add anim update else if it's not playing gap. tier. remove anim update and this anim update is coming from here but it needs to be one scope below so we can actually access it there

Speaker A

but here we cannot access the anim as I can see so we have to move all of this a bit to the top right here so there's one closing here and then we have these two so now if I save it you can notice how

Speaker A

it expands and it's immediately all white and it stays that way of course this is still not the same as on the finished website where it slowly does it and then moves on to the next one so let's fix it one thing we have to do is

Speaker A

we have to give this video a few more Properties or rather a few more handlers we have to know when will it end so we can say onended we're going to open up another callback function and we're going to check if the

Speaker A

index is not equal to three well in that case it's not yet the video end so we can call a Turner operator and call the handle process where we pass the video end and then a specific index so we know

Speaker A

which one will we end and if we are at the third one we call the handle process and call it a video last so we know that we need to restart in this case this can be an immediate return so we don't need curly

Speaker A

braces here at all and of course we don't need three equal signs if it's inequality if we save it now we should be much closer to actually transitioning to the second bar which you can see it actually opens and it should go to the

Speaker A

third one as well but the videos are not yet reflecting that so let's go back to our animations right here to use Gap that is here at the top and we're going to add a second Gap animation by

Speaker A

saying gap. 2 and here we want to Target the slide slider I believe we have given it an ID of slider yes you can see right here and we will modify it like this we will apply a transform

Speaker A

property where we will use the translate X and then we're going to make this a dynamic template string and we're going to move it by minus 100 times the video ID so for each video the first one is

Speaker A

going to be zero is going to stay there for the second one it's going to be 1 2 3 and as we update this video ID we're going to modify the percentage of how much we move away so that way new videos

Speaker A

will start showing up and of course we have to properly close it if we save this we're getting closer but not there yet we can also modify the duration to two seconds and save it and reload we get the first video playing

Speaker A

it's looking good the second one but still nothing happens in this case we want to use a special ease function and what are these ease functions well ease functions allow you to specify how you want your animation to happen it can

Speaker A

happen faster at the start and then slower at the end or you can give it some power at the start you can also make it elastic like this you can play with it and do whatever you want quite

Speaker A

interesting right in this case I found the power two do in out to work the best with our video specifically great we're getting very very close to having all of this working and I think I know why these are

Speaker A

not getting properly cleared if we scroll down all the way to where we're updating the specific animation here we are dividing just the video ref with the video duration doesn't make too much sense what I wanted to do instead is get

Speaker A

the current time of the video and then divide that by the video duration only like that it will actually be able to know how far did we come so if I reload now you'll be able to see that our video

Speaker A

tracking progress updates are now working properly they go one to another and soon we'll be able to to stop them as well and the reason why we're not moving from one video to another right now believe it or not it's a simple typo

Speaker A

instead of saying percent and then closing the parentheses right here I first closed it and then added a percent sign so if we just modify these two and the reload the screen we get the first video playing the progress works and

Speaker A

then it still fails because I have an extra curly brace so if I remove that extra color brace now it works as you can see it goes to the last one it allows us to reload or restart from

Speaker A

scratch goes first second the pause doesn't work right now so let's fix it we are pausing within our handle process where we have the play but I don't see the pause right here so basically we have to copy this play

Speaker A

and I think just renaming it to pause should do the trick because we're doing the toggle right here is playing or is not playing so if we reload so if I click pause it works and I continue this looks

Speaker A

and feels wonderful it's not just the videos that make it special it's the pieces of text it's the progress bar loading and this button right here one last thing we can do is I noticed that for some videos we need to apply a

Speaker A

specific class name right here so we can say class name to the video where we open up a dynamic block of code and say if list. ID is equal to two then we can translate x44 and close it and we don't need the

Speaker A

other so we can just do the end end we can close it and then we can also say pointer events none like this there we go if we now save it this looks great and as I promised if this is still not

Speaker A

working for you the full video Carousel will be added to that read me so you can copy it and overwrite this code right here if it didn't work before then it definitely will work now so with that in

Speaker A

mind let's expand it to admire it in its full Glory I'm going to scroll all the way to the top to check out our hero and now I'm going to bring the videos in view it nicely opens up we get the

Speaker A

second video playing too we can pause it we can play it it's going to go to the third one and finally we can also restart how cool is this I know I know this was a more complicated one quite a

Speaker A

complicated component to implement 200 lines of complex Logic for video refs getting the progress bar to working and more but you got it even though it might not have worked the start you understand at least a bit better of how you would approach

Speaker A

something as complex as this and that counts too so great job on completing the video Carousel and with it completing the highlights section of the video I hope you're excited for what's to come because the next thing is going

Speaker A

to be the 3D model look at those Reflections look at the Quality you can change the color and don't forget you can change the size so let's go ahead and implement the 3D model next using 3js oh and just so I don't forget if you

Speaker A

didn't download it at the start we have created a special 3js and GP guide specifically I'm referring to the GP part right here if what you have now developed was a bit tough and complicated I strongly advise you to

Speaker A

just go through the guide take it step by step and take the base Concepts in so then everything else will start making so much more sense I have also included some special tips and tricks in there so GP animations will be simpler for you in

Speaker A

the future great with that said let's get back to the 3D model so to get started with our 3D model let's create a new page right here or a new section called Model like this and of course we have to import it from

Speaker A

somewhere so let's import the model from components model and of course therefore we have to create it right here by creating a new component called model.

Speaker A

jsx with RFC right within it now back on our Local Host 5173 we can see the model right here at the bottom which means that we can get started with developing it we're going to start as we usually do

Speaker A

by turning this div into a section and we're going to give it a class name equal to Common Das padding which will apply some common padding on all the sides we can also create a div that's going to have a class name equal to

Speaker A

screen- max-width and within it we can create an H1 that will have an ID equal to heading because we're going to animate it very soon and it will have a class name equal to heading or rather section dashe heading

Speaker A

to and it can say something like take a closer look look at what you might be wondering well of course our model now we cannot yet see this piece of text right here and that's because we will animate it using Gap so in this case we

Speaker A

can scroll all the way to the top of this model and say use Gap coming from Gap react which we simply call like a callback function right here and we can specify an empty dependency array right here we can simply say

Speaker A

gap. 2 of course gsap needs to be coming from Gap and we can Target The Heading as we're used to and then we can also create a new object saying what we want to animate we want to make it come to

Speaker A

the position of zero and bring the opacity to be equal to one that way our header will be showing there we go take a closer look now we can scroll below this H1 and create a div which will

Speaker A

serve as the container for our model so let's create a new div that will have a class name equal to flex Flex that coal as we want the elements to appear in a column items Das Center and margin top

Speaker A

of five right here within that div we can create another div that will have a class name equal to w-o for full width H d75 which will look something like this for the height and we want to specify 75

Speaker A

VH which means vertical height so that's about 3/4s of the screen on medium devices we can increase that a bit by saying h-h and that's going to be 90 VH like this overflow hidden so there's no scroll bars and relative like this now

Speaker A

we cannot yet see anything in there but we have created some space to present our model within so to create our model or to show it we of course will render another custom component so we can separate the logic of the model of

Speaker A

showing that 3D model from this entire section so what we can do is create a new component called model view. jsx and for now we can simply call RFC within it and now we can use that model view

Speaker A

and render it as a self-closing model view component like this there's two different iPhones that we want to show here there's going to be the small one and the big one as you can see right here and we'll want to render both of

Speaker A

them so for that reason what we can do is we can immediately create references for each one so let's go to the top and let's create a new use State snippet and this one will be size set size like this

Speaker A

at the start equal to small so we need to be able to choose which one we currently want to look at and of course we need to import use state from react then we also want to get all of

Speaker A

the other model details for the small or the big so we can create another US state snippet and say model set model and at the start it will be equal to an object containing the title which can be

Speaker A

something like iPhone 15 Pro in natural titanium we can also specify different colors so we can do that an array of hash 8 f8 a81 like this we can also do something like hash ff7 B9 I found those values to work the

Speaker A

best and hash 6f6 c64 just so we have some colors to choose from and we can also specify the image this one will be yellow image which is coming from the utils this is just the default state which we'll be

Speaker A

able to modify later on and of course this model has to start with a lowercased m like this now there is still a bit of setup we have to do we have to set up camera control for the

Speaker A

model view so we have to specify camera controls as well which is interesting and we will do them like this cons camera control small will be equal to use ref coming from react and we will duplicate that and create a camera

Speaker A

control large we need to have a separate camera ref for each one of these two models and of course we use the size to Simply say which one are we currently viewing here we specify the model details these are the different colors

Speaker A

for different meshes which we will use within our 3D models and here we add the the texture which we're going to use you can see how it looks like here it's a JPEG but it doesn't allow me to

Speaker A

currently view it but you can view it within your just typical finder or file explorer so with that in mind we have created camera controls for this model view and also we need to create another ref to keep track of the model to access

Speaker A

its properties when animating so we can do that by saying cons small is equal to use ref where we can say new through do group like this so you're creating a new group of 3js elements and this three

Speaker A

of course has to be imported from somewhere so for the first time in this video we have to install 3js let's do it by saying mpm install 3 as well as ADD react D3 slre and add react D3 SL fiber these are utility helpers

Speaker A

that make the use of the 3js library easier for react applications so let's simply import this three coming from three we can do that at the top by saying import everything as three from three there we go and we can duplicate this and also

Speaker A

create one for the large model another thing we'll have to to keep track of and I know there's a lot of things to keep track of so this is the camera control this right here is the actual models

Speaker A

themselves and then we need to keep track of the rotation value of each model by saying const we can say small rotation set small rotation is equal to use State and at the start it's going to be set to zero and we can modify this as

Speaker A

well and set large rotation as well so large rotation and set large rotation we have to keep track of the values of both of these models at all times so that if we rotate it we can see and know where it is go back bring

Speaker A

it to zero and then show the other one great so this was a bit of a setup I know but now we can actually pass all of the important information to our model view which will soon render that model

Speaker A

so let's pass it the index this one will of course be one because it's the first one to show let's give it a group ref which is going to be equal to small a gap type of VI one so this is the first one

Speaker A

control ref for camera control of camera control small set rotation state is going to be equal to set small rotation and finally we want to pass the item which will be equal to the model this model is universal as it can be a big

Speaker A

one and a small one depending on what we choose in the state and also we want to change the size right here by tracking what we have in the state great now if we go back to our current

Speaker A

application we can still see just the model view nothing more so now let's duplicate this below and let's make it work for our big one by saying index is two large view two camera control large also set large

Speaker A

rotation and then the model and the size can remain the same now we can see two model views and soon enough we'll render those models but for now we first have to show the canvas so going right here

Speaker A

below we can render a canvas component coming from react 35 and within it we can render the view. port like this and this view also has to be imported from react 3 Dre viewport is a way to render multiple

Speaker A

views of a model in the same canvas doing this will allow us to animate that model now let's also make this canvas full screen so we can give it a class name equal to w-o and h-o and we can also style it a bit by

Speaker A

giving it a style property that can be position is fixed top is zero bottom is zero left is zero and right is zero with an overflow of hidden there we go so we're just resetting the positioning and later on

Speaker A

we'll also need to get access to the event source and you can do that by saying Event Source is equal to document. getet element by ID and we're going to get the root right here this is useful when you want to

Speaker A

interact with the model that you work with now this temporarily broke our application so let's go to inspect and go to the console and you can see right here it says unod type error document.

Speaker A

getet elements is not a function this right here should have been get element by ID as a it can only be singular so now we are back into the game before we start working on these 3D models let's

Speaker A

also show some additional information such as the title colors and the sizes that way as soon as we show the model we'll be able to play with it and modify it so going back right here we can go

Speaker A

below the canvas and Below one more div and create another div this one will have a class name equal to margin X of Auto and w-o right within it we can create another P tag that will say model. tile and immediately you can see

Speaker A

iPhone 15 Pro in natural titanium and we can also style it a bit by giving it a class name equal to text- smm font d light text- Center and margin bottom of five there we go that's better let's

Speaker A

also create a div below that P tag and that div will have a class name equal to flex Das Center and right within that div will have a u that will have a class name equal to color- container So within

Speaker A

here we want to map over all of our colors so we can open up a new Dynamic block and say models. map and then to get access to these models we're going to import them from constants and you

Speaker A

might be wondering what is this well it's nothing more than an array containing a couple of objects where each one contains some colors different meshes and also the title that is it so we want to map over those models and get

Speaker A

each individual item and then also the index of that color we're showing and for each one we want to automatically return An Li which is a list item with a key equal to I a class name equal to

Speaker A

w-6 h-6 rounded - full and margin X of two and then most importantly we want to give it a style property of background color will be set to to item.

Speaker A

Coler zero so this will be coming directly from that object within the model's array and then we can also give it an onclick so once we do that we want to set the model like this and set the model to be. specific

Speaker A

selected model be. blue yellow or whatever other Coler and we can immediately close this li like this if we save it and scroll down you can see these four different beautiful colors appear right here and we can also add a

Speaker A

cursor Das pointer so that the user knows that they can actually click it there we go it's not just for the show let's also go below this ul and let's create buttons for managing the size we can do that by saying button with a

Speaker A

class name equal to size- BTN Das container and within it we can simply open a dynamic block of code and say sizes. map where we can destructure the label and the value of each size and then automatically return a span that

Speaker A

will have a key equal to label and it will simply display the label as well of course the sizes have to be imported from the constant now you can see 61 and 67 let's style it a bit further by giving it a class name

Speaker A

equal to size- BTN that's much better and let's also give it a style property equal to background color and here if the size is equal to the selected value then it can be white else it will be transparent that way we'll know which

Speaker A

one is currently selected and also the color if the size is triple equal to the value then it will be black because it has the white background else it'll be white so now we can see which one is

Speaker A

currently selected and let's also add an onclick where we can call a callback function and the set size to be that specific value so now if we save it you should be able to click and move between those two states

Speaker A

as well as select different colors and immediately see that the title changes as well that is amazing but of course that's nothing without the models which are the main star of the show so we have to scroll all the way up and navigate

Speaker A

into our model view and that way we'll be able to make our colors and sizes make changes to the 3D models will display on the screen so first things first let's accept all of the props we're passing into this model view

Speaker A

component we're going to get the index the group ref the Gap type the control ref for the camera set rotation size the size and the item then we want to create a viewport for the model by wrapping everything in a view

Speaker A

coming from react 3 Dre each view has to have an index so we know which which one it is and we can pass it from the props the first one will have an index of zero and the second one of one we can also

Speaker A

give it an ID which will be a GP type also coming from props and let's also style our view a bit by giving it a class name and just so we can initially see it I'm going to give it a border of

Speaker A

two and border of red 500 so now you can see where it is positioned right now it is just a line into D but if I give it a w full and h- full it will take the full height of the

Speaker A

screen also we need to hide it if we're not showing it currently so we can turn this into a dynamic template string like this and properly close it and only if index is equal to two then we want to

Speaker A

say right dash minus 100% that's GNA look like this else nothing so this way we can swap between the left and the right one next we want to play with the lighting a bit and the first source of light will

Speaker A

be the ambient light which lights up all the objects in the scene equally so we can say ambient light and we can give it an intensity of about 0.3 and right now it looks like like it cannot properly read the light unknown

Speaker A

property intensity found but we'll fix that soon enough let's focus on what matters maybe even more than light well who knows because we cannot have a camera without light right but still we need both the camera and the light to

Speaker A

get the picture so we'll use a type of camera that simulates the perspective of the human eye and that is called the perspective camera coming from react 3 Dre like this we can give it a make default so this is

Speaker A

the default camera and give it a position that is an array of 0 04 so now we have the camera but it's still dark we can then create some more custom lights by creating a new component called lights. jsx and from the read me

Speaker A

of this project you can copy the lights. jsx component and paste it right here you'll soon be able to notice that this contains the environment and a couple of different lights we're using the reason why I decided to provide these lights to you

Speaker A

is because I was playing a lot with figuring out how to make this look the best and with these light formers I managed to create custom lighting that are properly light up our 3D scene with different lightings intensities

Speaker A

positions and more and once again just to remind you more details dets on these light formers custom lighting and 3D modeling with 3js in general you can find in the guide so with that in mind it looks like that even though we have

Speaker A

imported these lights right here still our 3js has some trouble figuring out whether they actually work or not and this could be just an ESL issue so let's go back right here and let's call our lights property like this by importing

Speaker A

those lights at the top by saying import lights coming from SL lights and if we scroll down it's still quite dark out there but don't worry as we'll figure it out soon right below the lights I'm going to call a suspense

Speaker A

which is used to provide some kind of a loader until the motel loads like this so you can give it a fullback and then within the fullback you can define something that's going to load like may be a div that's going to say loading

Speaker A

later on we'll make a custom loader but for now this will be good enough the most important thing is now rendering the iPhone model now the way we can get to that iPhone is by checking out our public models and then we have our

Speaker A

scene. glb which contains the iPhone model now I have found a phenomenal GitHub repo that turns gtfs into jsx components so just click this link in the description and then simply drag and drop your scene by revealing it in

Speaker A

finder or opening in Explorer and then simply drag and drop it in what it will do is it will automatically render it for you in the browser so you can check it out which is very very cool for testing out different

Speaker A

models but then you and more importantly what we care about is that it generated an entire 3D jsx file with all of the meshes right here so let's simply copy that entire thing I think we can do it

Speaker A

somewhere here now here we can play with the model even more and modify the Shadows the types and stuff like that but in this case I will just keep it as it is and import this entire thing copy it and I want to create a new

Speaker A

component called iphone. jsx and simply p B everything I have here don't worry about these eslint warnings for now with that in mind let's go back to our code and right here within the suspense let's render this iPhone

Speaker A

model which of course has to be imported at the top by importing iPhone from iPhone which will broke the screen because if you go into that iPhone you will see that right now it just exports it as a

Speaker A

function instead of saying something like function model and then at the bottom we can say export default model that way we have something to import within our application and of course since it doesn't know where we put this scene we have to say that it's

Speaker A

coming from models scene. glb and if you scroll up in this same file you'll be able to see that here we also have to say models scene glb if you do that our app is back to the working State and if

Speaker A

we scroll down you can see a very very tiny iPhone model in the middle I'm going to zoom it in and you can barely see it so now let's actually play with the lights the positioning the camera and let's make it bigger I'm going to go

Speaker A

back to our model view right here close everything else so we can just focus on it but before that very quickly let's get rid of these es lint warnings they're okay in this one but under lights they are quite ugly to look at

Speaker A

and especially within our iPhone model here they're all over the place so to fix it you can go into the eslint RC and right here you can add a plugin called at react das3 and save it that way ES this length

Speaker A

will automatically know that these are real properties that exist and that you can call as you can see now it knows exactly what intensity is and it's no longer complaining while we're here let's also remove this ugly border and

Speaker A

let's make this iPhone model the star of our show I'm going to wrap this entire suspense into something known as orbit controls which allow us to move the camera using the mouse so I'm going to say or or bit controls coming from react

Speaker A

3 Dre and that will be a self-closing component right here so we don't yet have to wrap it but we do have to wrap suspense within something known as a group so a group containing the suspense and the iPhone like

Speaker A

this this group will have a ref equal to group ref it will have a name if the index like this is equal to one then it's small else it's going to be large and we can also give it a position which

Speaker A

is equal to an array of 0 0 0 to position the model in the center of the screen now let's play a bit with orbit controls we want to make our orbit controls the default way of traversing over our model we want to give it a ref

Speaker A

equal to control ref we also want to give it enable Zoom to false as we don't want to zoom it in we just want to move it around we're going to also disable panning so we cannot once again kind of

Speaker A

move it around and we're going to modify the rotate speed to about 0.4 so that it's slow and steady then we're going to provide a Target to Target the center of the screen by saying new three and this

Speaker A

three has to be imported at the top by saying import everything as three from three like this and now if we scroll down we want to call it and construct a new Vector like this Vector 3 and give it 0 0 0 as

Speaker A

X Y and Z axis so we position that in the center as well finally once we stop rotating we want to get the angle of the camera so that we know where we are so we can say on end we can call a

Speaker A

function that's going to set rotation angle or rather set rotation State I think we called it to control ref do current dot get as AAL like this it's a weird one I know but we need to get this specific angle to know where we

Speaker A

are in the space and soon enough we'll be able to rotate our iPhone but for now let's scale it up so we can actually see it we can do that by giving it a scale property and saying if index is triple

Speaker A

equal to 1 then we want to say 15 15 15 else if it's the big one we want to show we're going to make it 17 17 17 there we go that's more like it and you can see that the orbit controls work

Speaker A

because if if we remove the orbit controls or if we comment them out you cannot move it it stays stuck in place so these definitely come in handy and allow you to move the model now we can also provide the item

Speaker A

which contains all the information about that model and the size which also contains the information about the size so this is our model as you can see we have it here and if you click here it does hasn't quite yet change the color

Speaker A

but it will soon if we dive into it and create something known as a texture by saying const texture is equal to use texture coming from react 3 Dre and we want to pass it props do item. image IMG

Speaker A

like this this contains the mesh we want to cover our phone with then we can use a use effect like this and we're only going to call this when the material materials or the props that item change so once we make some kind of

Speaker A

a modification to these buttons that change the colors and the size within here we want to call the object dot entries to get the key and the value pairs of all of our materials and we want to map over each one of these

Speaker A

materials where we get an individual material and then we check if that material exists we can check that by checking if material zero is triple equal to a specific string that we can then compare with a specific color now these are

Speaker A

basically strings of IDs that contain about 10 to 15 characters and I definitely don't want you to type all of these by yourself so in the read me down below you can find those five or six different material callers

Speaker A

as a matter of fact you can find the entire use effect belonging to the iPhone model so copy it and paste it right here as you can see these are the material names that can be changed and they modify the color so material 1.

Speaker A

color is the new color coming from the props which we choose on the screen now we get an error because we didn't import use effect from react and we also need to import three so we can do that by

Speaker A

saying saying import everything as three coming from three and if we save that now we're back and would you look at that we have a yellow iPhone and it actually looks quite good there we go we can change it to White and now our

Speaker A

picker works as well this is wonderful but we're going to make it even better if we go to the finished website you can see that on the blue iPhone we have a very Vivid blue color if we change it to Yellow it is completely

Speaker A

yellow and completely dark whereas on ours currently yeah sure it does change a bit but for white color it just looks too white right so what are we going to do is take the texture from this image and then apply it to this specific front

Speaker A

portion of the screen and the way I found it is I use that same that generated this jsx and then there I inspected to see which specific material do I have to apply that texture to and you can use a control or command F and

Speaker A

search for EI IU and find it here you want to expand this mesh and then within it give it a mesh standard material with a roughness of one and and they map off texture that way we can apply black for

Speaker A

black this one for the white this one for the yellow blue and so on so you can see that now it makes complete sense and it looks much better as we're applying a custom texture for each color great so with that in mind we

Speaker A

can exit this iPhone and we can finalize our model view by providing a proper loading because now if I reload this loading doesn't look too good so instead let's create a new component called loader do jsx run rafc and then import it right here as a

Speaker A

custom component there we go and of course we have to import it at the top by saying that it's coming from loader loader now if we go to the loader now if we reload it will break because don't

Speaker A

forget we have to wrap it in HTML so that it knows that it's not 3D so we need to wrap it in HTML and this HTML coming from react 3 Dre and then we can give it a div which

Speaker A

we can absolutely position by giving it a class name of absolute top zero left zero W full h- full Flex justify Das Center and items Das Center within it we can render a new div that will say something like loading dot dot

Speaker A

dot and we can also style this a bit by giving it a class name of w-10 VW h-10 VW and rounded Das full now if I scroll down and reload it's looking just a tiny bit better but actually I created this loader file to

Speaker A

give you the opportunity to play with some interesting and exciting models maybe search the internet for some exciting 3D models off different loaders and once again a complete list of websites where you can find different 3D models can be found in our 3js guide so

Speaker A

download it check it out and do something interesting with this model and once you do that go on LinkedIn and x and tag us on there because I would be more than happy to share your work with that in mind you

Speaker A

can see that there's only one property that we didn't use which is the set rotation size and that's because I misspelled it it was supposed to be set rotation state which we are using right here Below on end we properly set the

Speaker A

rotation state so with that in mind let's go back to our that's going to be a model that J SX and right now we have some fixes to make you can see that our second model which is the big one is

Speaker A

also visible on the bottom and if I click right here nothing really happens right so let's play with gap where for the first time ever we're combining gsap animations with 3js models to make something truly exciting like this thing

Speaker A

right here where it rotates and we get the second model to make that happen we can scroll all the way to the top create something known as a timeline we can call it TL for short and call it a gap.

Speaker A

timeline so that we can move across that timeline then we want to create a use effect like this and it's only going to change when the size changes here we want to check if we are going to trigger the size is

Speaker A

equal to large and which case we're going to do something or if size is triple equal to small when we can do something else so now we're going to do a special kind of Animation which is a timeline animation so it looks like this

Speaker A

broke our application most likely because we haven't yet imported use effect from react yep that was it and now let's create a bit of a more complicated animation since it will be a bit more complicated what do you say that we

Speaker A

extract its logic to another file we can create a new file within the utils folder which we can call animations.js within here we can say export const animate with gap timeline and this is a special function which we will call now let's first talk

Speaker A

a bit about what a timeline even is a timeline is a powerful sequencing tool that act as a container for twns and other timelines making it simple to control them as a whole and precisely manage their timing without timelines

Speaker A

building complex sequences would be far more cumbersome because you need to use a delay for every animation like this you apply delays weight and so on but with the timeline you can specify exactly what you want one after another

Speaker A

but to make that happen instead of calling gap. 2 you first create a timeline and then call the timeline. two exactly like what we have done right here so what we can do next is we can call this animate with gep timeline

Speaker A

right here and of course we have to import it from utils animations and we want to pass a couple of props to it we're going to pass the timeline itself we're going to pass the small model right here the small

Speaker A

rotation as well as has the vue1 ID and the vue2 ID so we know when to move around and you might be wondering why are we doing small for the large one well if the size is currently large we

Speaker A

want to animate it to the small one and vice versa also we're going to give it an object of transform where we're going to run a translate X of minus 100% this will remove it from The View and we can also provide a duration

Speaker A

of about 2 seconds so what we're doing here is we get the current value of the small rotation then we rotate the small model by the value stored in that rotation we animate the small model view to the left and we animate the large

Speaker A

model view to the center but if the size is small we're going to repeat the same thing right here but we're going to display the large model and the large rotation and we're going to animate from view2 to Vue one and the translate X is

Speaker A

going to be zero there we go so now we're passing all of the necessary props into this animate with gsap timeline and we can accept all those props right here first we passed in the timeline then the rotation ref then the rotation State

Speaker A

then the first Target then the second target these are Vue one and vue2 and then all of the animation props now that we have these first we can call the timeline do 2 and we want to go to

Speaker A

rotation ref do current. rotation so we get a specific rotation and we modify it by saying Y is rotation State duration is 1 second and ease I found this one to work the best power two.in out right below that one we

Speaker A

called the timeline two once again and this time we timeline to the first Target and we spread out all the animation props so these will be the things like y duration and more so animation props coming from the props and we can

Speaker A

provide the ease of power two.in out and also after that we can provide a string of the lower than character this symbolizes to insert the animation at the start of the previous animation finally we can duplicate this one right here below and say timeline

Speaker A

two second target same thing and everything else will be the same so we animate from the first Target to the second target now if we save this you can see that something started happening they're moving so if we select the small one we

Speaker A

get it back if we select the big one they're both gone now let's see why here we have two and on the other one we have no models at all well we can go to our model and let's go directly into the

Speaker A

model view and here is where we're messing with which one are we showing so basically we modifi the right position of one to basically get it off of the screen but this right 100 is not going to work if it's not absolutely

Speaker A

positioned so here we can add position of absolute and now they show one on top of another look at this this is looking a bit weird let me reload yeah there's still one on top of another and that's because this right is not

Speaker A

getting applied as it's outside of the dynamic block so it needs to be within that Dynamic block right here if index is two then apply right else apply this one there we go so now it's hidden and if it go right here it's showing this is

Speaker A

wonderful and you can see how nicely it it rotates like if you mess with it it's going to rotate back to the starting position and then move away this means that our models are now gr we can modify the colors notice how

Speaker A

the screen also changes and you can go back to the different one that also changed the color the meshes the textures the lighting it's all looking great and now that we can actually see the model we can also play with the

Speaker A

intensity a bit like bringing it to 0.5 maybe bring it to five there we go now you can notice a big difference or even 10 right now everything is very very light no matter which color you choose so the colors really pop but to get that

Speaker A

a realistic look I kept it very very low to 0.3 and that way you can really see the titanium coming out of this iPhone but of course this is something for you to play around with you can modify the

Speaker A

perspective camera the lights and so much more that's the beauty of 3js learning how to navigate your way around the 3D World and of course if you want to learn a bit more about all of the different types of lights that exist all

Speaker A

of the different cameras that exist and all of the other properties that you can use to mess with your models definitely check out our guide which is linked down below with that in mind let's close our model view animations and model and

Speaker A

let's expand our browser to full screen I'm going to scroll up and reload and let's see how all of this looks like in full screen we have this beautiful titanium iPhone 15 Pro we scroll down this was a tough one right the Highlight

Speaker A

section with animated progress tracking bars this looks and feels good we can also pause it and we can scroll to reveal the model now now you can move it around see how it looks like in different light and

Speaker A

make a decision on which one you want to buy it's no longer should I buy it or not it's which color and which size should I get Apple's marketing division is definitely very good so we can learn a lot from the way that they present

Speaker A

their products on the website and this is one of the perfect use cases for smooth animations as we saw with the videos and also perfect use case for for showing up those 3D models there aren't a lot of 3D websites but if there is one

Speaker A

that really should use 3D it's the one where you can show the products in all of their full glory and now that you have done all of this created the 3D model as well as these playing videos and a nice looking header when building

Speaker A

websites as phenomenal as these ones right here there's something that we often Overlook and that is per performance right you're going to say why should I care about performance when my websites look like this that's the most common

Speaker A

thing we think about as developers right but still no matter what you put into it they still have to be performant and quick not to mention that the design should never take away from the form you need to be able to figure out if the

Speaker A

business objectives of the website are properly achieved such as is this titanium iPhone taking away from the screen screen and are people actually clicking the buy button so today I wanted to take this video a step further and allow you to get answers to all of

Speaker A

those questions and learning this matters it matters a lot let me give you a comparison of two resumés featuring projects from different developers take a moment to read through them and let me know which one sounds more impressive

Speaker A

the first one just built a website that looks like the iPhone 15 Pro page from Apple and used react 3js and gsap cool right but the second developer developed that website as well as tracked the number of visitors and how they're

Speaker A

actually browsing the site are they taking the necessary actions that we want them to take the second developer they're also tracking performance loading speeds clickthrough rates and all of that good stuff so let's be real which developer will get a job well well

Speaker A

it's going to be the one with business metrics and performance optimizations so for that reason in this video even though you might not have expected it I want to teach you not just how to build and deploy a website rather

Speaker A

teach you how to get answers to all of those hard questions and we'll do that using a completely free tool called Sentry which will give us access to all of this information and more it's super simple to integrate so click the special

Speaker A

link in the descript description so you can follow along and see exactly what I'm seeing and then click try Sentry for free create your account by signing up with Google or GitHub and after you sign up you'll be able to answer a couple of

Speaker A

questions such as your organization's name if you have a company or if you work within a company enter their name if not simply type JSM click I agree to terms and services and you can choose whether you want to get email

Speaker A

updates let's continue and now let's follow the onboarding we can install Sentry by clicking start and we'll choose the platform we want to monitor in this case it will be browser and how handy it is they also have a react

Speaker A

wrapper press configure SDK and we can follow the steps provided right here let me Zoom it in a bit and first things first we want to install Sentry as a dependency so let's copy this command open up a terminal paste it

Speaker A

and press enter then we can configure our SDK by copying this entire block of code and heading over to our main.

Speaker A

jsx here is where we can paste what we copied the setup for Sentry we'll modify it just a tiny bit by removing this root render as we already have that right here and we're going to keep the most

Speaker A

important stuff right here that we copied it seems like a lot but you can also just remove the comments and then you'll be able to see that there's basically a couple of specific properties that we are applying right

Speaker A

here to customize the way that we want to track our application there we go this is it next we have to upload our source Maps which allow us to track the traces for errors trust me you're going to be pretty

Speaker A

amazed at what this does so let's copy it let's install it as we have done that before and to verify we can render this somewhere by returning this button here we get asked to install the sentury wizard so let's press Y and you'll be

Speaker A

asked to select what you want to do we can choose yes or no in this case it says you're not within a GitHub repository the wizard will create an update files do you want to continue anyway I'm going to select yes are you

Speaker A

using sent SAS or selfhosted we'll be using Sentry SAS do you order they have a Sentry account yes we have just created it before the wizard will verify that and you can select your Sentry project and choose your framework I'm going to

Speaker A

choose V and just like that it's going to install the Sentry V plugin without you having to do anything it's going to ask you for using cicd tool to build your application we're going to say yes and we're going to say yes

Speaker A

continue that's it we have successfully set up Sentry for our project now that that got installed let's modify our Integrations right here right now we're using the browser tracing integration but we also want to add Sentry do metric.

Speaker A

metric aggregator integration like this and we also want to add a Sentry do react router V6 browser tracing integration to which we can pass an object and say use effect is equal to react. use effect this way it just knows that we're using

Speaker A

react and how use effects work finally we want to update our app jsx to wrap the app with Sentry so let's navigate over to app we're going to import everything as Sentry from add Sentry SL react and then we can simply wrap our

Speaker A

app by saying Sentry do with profiler and then we wrap the app we have believe it or not that's it that's the entire setup so right now it says this snippet contains an intentional error and can be used as a

Speaker A

test to make sure that everything is working as expected so let's simply copy this return and instead of returning this entire main let's try to Simply return that button that contains a method that doesn't exist I'm going to save it and run our

Speaker A

application by running mpm runev and opening it on Local Host 5173 immediately you can see break the world so now if you click view sample error it's going to process that sample event and it will give us all the

Speaker A

information about the event that happened type error object object has no update from interesting this one doesn't belong to our app but soon enough we'll configure Sentry to start viewing real errors so let's break our app this break the world

Speaker A

is actually a button which you can click and it contains a method that doesn't exist within our application so if you inspect it and go to the console you can see if I make this the normal size that

Speaker A

it's going to say unod reference error method does not exist is not defined so we really are breaking the world so once you do that Sentry should have gotten that event and should enable our account so now if we go to

Speaker A

issues you can see that we have our reference error method does not exist is not defined Sentry will automatically group similar events together into an issue so let's click got it and we can go into it and see more information

Speaker A

about that issue a pretty crazy thing about this is that you can see the browser the operating system as well as so much more information about that user their IP address the URL and more we can also Mark it as handled or not handled

Speaker A

we can also see which function triggered it and we can see full breath cramps of how this error came to be all within this Sentry interface and not within our application so imagine if you gave your app to the users and if they noticed an

Speaker A

error it will be almost impossible to debug they would send you screenshots pieces of code and so much more but with this you know exactly what is happening and believe it or not you can also see a replay of what the user was doing when

Speaker A

the error happened you can do that by by going to replace and you might need to wait a bit or reload to ensure that it actually shows up but check this out we have most dead clicks which means clicks

Speaker A

that don't do anything and I did click on that button four times we have rage clicks as well uh because I was clicking on it and nothing was happening so I was raging a bit guilty us charged and then

Speaker A

we do have a full recording of the duration with everything that was happening let's click into it and check it out if I click play we can see the entire screen of exactly what I was doing on the screen and when I clicked

Speaker A

it as well as when the specific errors were happening how crazy is that I was also messing with my desktop and mobile view so we can see that as well and you can see exactly what's happening right here on the timeline pretty cool stuff

Speaker A

but of course the most important thing we're concerned with is the aor stat where you can click it see the exact event ID and see all the information about the error that happened so that we can resolve it and to resolve this error

Speaker A

we can also scroll down a bit and see more information you can see that the session replay since now it has been rendered actually appears right here within that specific error so you don't even have to go to replace and then we

Speaker A

have the complete BREC of the error as we have seen before and everything about the user's device browser and more and if you scroll a bit up you'll be able to see this resources and maybe Solutions I like how at least they are being

Speaker A

realistic with AI sometimes you might get lucky but again maybe not so what we can do is we can click view suggestion and their AI will of course if you give it consent try to solve the error for

Speaker A

you and hey it looks like you've encountered a reference error in your JavaScript code which we did so to fix this issue you'll need to define the method does not exist in your code by adding it right here and they give you

Speaker A

some more tips for debugging it in this case instead of actually declaring it we know that this is faulty code which we don't need so for now I'm going to Simply remove it from here and that will fix the error so I'm going to say yes

Speaker A

this was surprisingly helpful now let's see if the error has truly been fixed by going back to our app and reloading the screen yes we have our Titanium video we have our highlight section and we have our iPhone model

Speaker A

right here looks great but we're not here just to fix errors let's explore the performance tab for you it might say zero it does take a minute or two to load uh but very quickly you should be able to see 100

Speaker A

here I mean our website is loading incredibly fast we can see that the timing is incredibly low and we can also head over to web vitals and we can see the largest contentful paint within 300 milliseconds which is good and you get more

Speaker A

information about everything that is happening on your app I mean how cool is this and how convenient it is to have all of this in one place we can also go to resources where you can track EX exactly what your website is

Speaker A

transferring over to the devices of different clients the main jsx is the main thing we're transferring now as well as some assets and images next let's scroll down a bit and check the Discover tab here you can discover different

Speaker A

trends for your application like we can bring it to the last hour and you can see exactly when your users were doing what which is quite exciting so here you can see that one user had an error and

Speaker A

there was a transaction for the other user then you can track and see exactly what they're doing from what browser family what device and so much more it is all here as we have explored before and you can also see complete Network

Speaker A

events for everything they were doing on the site next let's check out the dashboard you can choose from different templates that you can use like the frontend template which shows you the erroring URLs and web viice vitals or

Speaker A

you can just check out the general one so let's see the general and here you can see the number of Errors the number of issues the number of affected users which is interesting the handled versus unhandled errors uh yeah you can see

Speaker A

this one is now counted as handled because we have fixed the error you can see the Errors By browser so you know where everything is failing overall user misery is also a very interesting metric to to track I guess and and I mean all

Speaker A

of this is working so well for tracking what's happening on your application now let me go back and let's see if I can get some more information from the front end template by adding it to my dashboard and here if I zoom out just a

Speaker A

tiny bit you can see more information about the overall LCP FCP layout shifts happening page load times and more so you can see the top five issues by unique users urls where the issues are happening and if you have any slow page

Speaker A

navigations of course you can customize this by adding more viets for duration throughput crash rates health and so much more even LCP by country which is good to know if you have users from different countries so I hope you like

Speaker A

this little intro to Sentry and how we can use it within our project now as we continue developing our project we'll be able to come back to it and see if it has recognized some new errors or if our

Speaker A

apps performance dropped as we introduce some new animations so we'll be able to track it all in real time and you'll see me use Sentry in many more videos in the future I recently found out about it and

Speaker A

I'm going to use it for all of my apps including our official course platform here there's a lot of things that could go wrong just due to the sheer amount of features we're implementing within this project people that have purchased the

Speaker A

ultimate nextjs course have access to this platform and we want to ensure that nothing goes wrong on the platform we have a lot of custom stuff like custom code blocks which you can copy uh all the way to complete files complete

Speaker A

configurations hints images and a lot more stuff like these callouts right here so you don't forget stuff so if you're watching this video for building a gap and 3js react application you're going to love what we do in the ultimate

Speaker A

NEX gs14 course so check it out and you'll be able to access it within our new platform and getting back to sentury as I said you'll see me using their software in many of the upcoming videos and we're going to dive deeper into

Speaker A

things like profiling user feedback that allows your users to quickly add a bug report cron actions alerts and so much more while my goal is to teach you how to build beautiful websites with this I want to take take you a step further and

Speaker A

also teach you how to make them make sense from a business as well as a marketing and maybe even performance optimization side of things so with that in mind let's focus on the next section of the day which is going to be this one

Speaker A

where you can explore the full story of how iPhone gets made with this video and some new images appearing and of course if you continue scrolling down more text and then these images animate back in so with that in mind let's get started

Speaker A

working on the next section by pulling this to the side and adding the next section right here within our app.jsx to get started with our next section we can create a new components within the components folder called features. jsx we can run our afce right

Speaker A

within it and then we can navigate over right here import it features coming from features and that's an automatic import from that/ components forward slash features now if we go back to our website you should be able to see features right

Speaker A

here at the bottom which means that we can dive right into the features and start implementing it first things first we're going to turn this into a section with a class name equal to H full for full height and common Dash padding

Speaker A

we're going to also give it a BG off zinc as well as relative and overflow Das hidden now you can see features has its own space right here let's also create a div right here with a class name equal

Speaker A

to screen- max-width within it we'll have a div with a class name equal to margin bottom of 12 and w- full and right within it we're going to have an H1 which will have an ID equal to we can

Speaker A

do features unor title so we know what it is and you know why we're adding it that is because we want to animate it let's also give it a class name equal to section dashe heading and it can say

Speaker A

something like explore the full story dramatic as Apple usually likes to do it so now we can add that first animation if we scroll up and say use Gap coming from gab react now you know how we use the used

Speaker A

gap before you provide a callback function right here and then you also add a dependency array now in this case I want to teach you how to make this just a bit more optimized and we want to use a dry principle of good code

Speaker A

architecture which means don't repeat yourself now whenever we use the used gap which you can see it's a couple of times so far typically we use gap. 2 and then specify what we want to happen and in these cases we didn't have to use the

Speaker A

scroll trigger but sometimes we did so if you see scroll trigger we used it in the video carousel right here where we have this used gab gep 2 with the trigger video and then toggle actions now every time that we want to use a

Speaker A

specific scroll trigger we need to repeat this part trigger is video toggle actions is restart nonan Nan and so on so wouldn't it be better if we extracted this function call where we repeat some stuff to a new function within our

Speaker A

animations.js file we already have this animate with gsap timeline but right here above it we can create a new export const animate with gap which is equal to we get the target which we want to animate the animation props such as

Speaker A

you know opacity one and then also scroll props and here we're going to call the basic gap. two property of course Gap has to be imported from gap which Target do we animate well we already have it under

Speaker A

Target and then what are the animation props such as opacity one right in this case we can just spread all of the animation props coming from the props and then we can also add this scroll trigger that I talked about where the

Speaker A

trigger will always be equal to the Target in our case at least and then we also have these so-called toggle actions and what toggle actions are is they determined how the length animation is controlled at four different places on

Speaker A

enter so when we first enter it we want to restart the animation then on leave once we leave this specific Target then we want to reverse the animation so this is interesting reverse then when we enter back to it we want to restart and

Speaker A

then when we leave back we want to do reverse so this doggle action figures out what will happen with this specific animation on four different distinct places whenever we scroll in when we come back when we scroll down and scroll

Speaker A

up once again within here we can also Define the starting position of the scroll trigger something like top 85% that means that when the top of the trigger is 85% from the top of the viewport it's going to activate giving

Speaker A

us enough space and time to trigger the animation and we can also spread spr the rest of the scroll props great so now we have this animate with gap function with scroll triggers and now we can go back

Speaker A

not here but rather in the features and call animate with gap and the only thing we have to do right now is provide the Target and in this case the title is the ID of the H1 so features uncore title and then we

Speaker A

need to specify the Y is zero and a capacity is one so basically we're simply saying what do we want to animate and now if we scroll down we cannot see anything yet and that's because I forgot to

Speaker A

provide the hash to indicate that it's an ID so now if I reload oh nothing is happening yet the ID seems to be correct and animate with gap indeed provides the Gap 2 functionality oh yeah but for scroll

Speaker A

triggers to work we also need to register a scroll trigger plug-in and you do that by importing the scroll trigger coming from Gap all and then you say gap. register plugin and you simply pass that specific plugin you want to register this is how

Speaker A

you use plugins within Gap so now if I reload that is how you use plugins within Gap Tab and the reason why we might not be able to see the animation yet is because we cannot scroll to the

Speaker A

top of it so we need to keep adding some more stuff so once we scroll down we'll be able to see it so let's go back to Features below this H1 and Below another div we'll create a second div with a

Speaker A

class name equal to flex Flex Das call for column justify Dash center items Das Center and overflow Das hidden so we don't see any scroll bars within it we can create another div which will help us position the title within it by

Speaker A

giving it a class name equal to margin top of 32 margin bottom of 24 and padding left of 242 within there we can simply say H2 that's going to say iPhone and that iPhone you can see here so

Speaker A

let's style it a bit by giving it a class name equal to text- 5 Excel that's very big as well as on large devices text- 7xl which is even bigger and font D semi bolt there we go iPhone let's

Speaker A

also duplicate this below and say forged in titanium as here we want to show what it is made out of there we go iPhone forged in titanium and now you can also see the explore the full story appear because we

Speaker A

scrolled nicely there let's also go below this H2 and Below another div and then create another div inside of which we'll show our animated videos and images let's give it a class name equal to flex Das Center flex-all on small devices padding X off

Speaker A

10 then we can give it a div inside of it which will help us position these elements by giving it a class name of relative h-50 view height so that's 50% of the screen W full for full width flex and

Speaker A

items stash Center finally within here we want to display the video so we can say video with a source that will have an SRC of explore video coming from utils and a type of video MP4 if we scroll down we can see

Speaker A

something that appears to be a non-playing video so let's give it a property of plays in line let's give it an ID of explore video let's give it a class name of w-o for full width age- full for full height object D cover as

Speaker A

well as object Das Center we can also give it a preload of none so it doesn't take away from the website's performance we will play it muted and we will Auto playay it and we can also give it a ref

Speaker A

to later on play with its settings so at the top we can create a new ref const video ref is equal to use ref coming from react and we can pass that video ref right here and there we go as

Speaker A

you can see it started playing now what's going to happen when it ends it just stops but later on we want to make sure that we animate it in and out once we go up and down before we do that

Speaker A

let's also render the other two images which we will animate so we can go below this video and Below another div and then create a container for our images by saying div will have a class name equal to flex

Speaker A

flex-all w-o and relative within it we can create another div which will have a class name equal to feature Das video- container and within it we can have another div that will contain one specific image so it will have a class

Speaker A

name equal to overflow Dash hidden Flex -1 and h-50 VH within it we can render a self-closing image tag that will have a source equal to explore one IMG an Al tag of something like titanium and a class name equal to

Speaker A

feature Das video Gore grow we'll use this to Target this and give it some animations so now let's duplicate this entire div containing the image and let's make the second one render the explore 2 IMG which we have

Speaker A

to import say Titanium 2 and I think this is it if we save it and reload we thought that we might be able to see those images but there's nothing yet and that's because they're hidden so let's go ahead and animate them in we

Speaker A

can scroll up and we can reuse this same animate with gap function where we can provide a new Target of dot Gore grow and then we can expand it so it's easier to see which props are we passing and we

Speaker A

can also give it the animation props such as scale of one so it's going to get bigger opacity of one and ease of of power one so this is the way that it actually animates we can also give it

Speaker A

some scroll properties and in this case I'm going to use scrub of 5.5 I found this value to work the best and as soon as you save the file you can see those two images appear they go out

Speaker A

and they come back in wonderful now let's scroll a bit more down and let's also add some text below those images so let's find the last image go one two divs below and create a final div container that will have a

Speaker A

class name equal to feature Das text- container inside of it we can create another div that will have a class name equal to flex D1 and flex D Center and within it we can have a piece of text A

Speaker A

P tag that has a class name equal to feature Das text as well as Gore text because we'll animate it as well so this Gore stands for Gap and here we can say iPhone 15 Pro is and then we can leave a space like

Speaker A

so and save it you cannot see anything yet because we didn't animate it in but at the end it should look something like this there we go iPhone 15 Pro is and then want to create a span for the rest of

Speaker A

the text so let's do that right below we can create a span element with a class name equal to text- White and then you can follow along and type with me I'm going to say the first iPhone to feature

Speaker A

an arrow space grade titanium design using the same aloy that spacecrafts use for Missions to Mars okay let's go back we still cannot see it so now might be a good idea to animate that in so if we scroll right

Speaker A

here below this animate with gap we can add a new one and say animate with gap what do we want to animate in this case it will be a Gore text you see how easy it is once you have a function you can

Speaker A

reuse then you provide specific properties you want to animate such as y of zero opacity of one we can also do an ease of power two. in out and a duration of one of course this has to be within an

Speaker A

object so let's fix it there we go and that is it so now if you reload you can see that the text appears right below let's fix this it's an iPhone and now if I reload it's not there that's because we have to scroll a

Speaker A

bit more to see it don't worry we'll do that soon let's just go below this div and then duplicate this entire div with flex one and flex center for the second piece of text there we go now we can see it but of

Speaker A

course we have to say something different now so in this case I will say something like let's do titanium has one of the best strength to weight ratios of any metal making these are and here we can say

Speaker A

lightest Pro Models ever apples surely does know how to Market and here we can say you'll notice the difference the moment you pick one up there we go so now we have this nice piece of text right here looking great so now this

Speaker A

entire section is looking good the images are indeed animating in the text comes in as well but this video once it continues playing it's just stuck so we have to play with it a bit more to to make it come to life let's scroll up and

Speaker A

what do you see that we try using this animate with gap so we can say animate with gap where we can provide the hash explore video and save it now if you reload it starts playing it looks great there we go it animates but if you

Speaker A

scroll up or down still nothing happens so let's go to animate with gap let's copy this entire gap. 2 and for this one let's apply a manual animation without using a reusable function because it will be just a bit different so the

Speaker A

target will be the explore video of course with the hash at the start we don't need to pass any animation props the scroll trigger will also be EXP explore video and the actions will be a bit different because

Speaker A

we're dealing with the video so it's going to be play pause if we go away and then reverse restart you can play with these toggle actions a bit more and see how they behave finally the start will be minus

Speaker A

10% at the bottom and finally the third property will be uncomplete so what happens once it is complete and here we want to say video. playay so essentially we will just restart the play and of course here we also have to import Gap from

Speaker A

Gap and now we can scroll down you can see that the video plays the imag is animate and once it comes to the end if we go out and come back again nothing happens and that's because this video. playay right here is not

Speaker A

referring to anything right rather it should be saying video ref. current. playay because that's how we're targeting this video so now as you can see it's playing and once it finishes if I scroll up or down it will

Speaker A

start playing once again great now let's expand our browser and check this out right here after you see this great looking model you scroll down and you're greeted with explore the story of the iPhone forced in titanium we have this

Speaker A

great looking video and two images that give you more detail now if you scroll down you see some pieces of text and if you scroll up nothing happens to the video but if you go once again down it

Speaker A

starts playing again it's just a small little detail and of course you have a bit of creative freedom to figure out how you want to play with these animations by choosing when you want to trigger them you can trigger them on

Speaker A

click or on scroll or in many different situations with that in mind our phenomenal feature section has now been completed it's been a bit easier than the last two right well that's because now you know how to animate better and

Speaker A

let's be honest it also was a bit easier to implement than the last two but now let's move to the next one which looks like this A7 Pro chip a monster for gaming looks like this and on desktop

Speaker A

devices it looks like this the chip animates in and this great looking video starts playing so with that in mind let's start doing that section next by going back to our development environment closing everything besides the app and creating a new component

Speaker A

within the components folder called how it works or you can also call it a chip so I'm going to say how it works Js XX run ource go back to the app and render the how it works section which of course we

Speaker A

have to import from the components how it works and now at the bottom there it is we can come into it and start developing it to get started working on our how it works section we can first turn it into a section and give it a

Speaker A

class name equal to Common padding as we typically do next we want to also give it a Max screen width so we can create a new div and give it a class name equal to screen Max width now right

Speaker A

within it we can create a new div that will have an ID equal to Chip and yes this will be our processor chip image so we can give it a class name equal to flex Das Center w - full and margin y of

Speaker A

20 within it we can render the self-closing image tag this image will have a source equal to chip image or chip IMG coming from utils as well as an Al tag of Chip and a width of about 180 and a height of about

Speaker A

180 as well there we go A7 Pro chip now what do you say that we go ahead and animate it so right at the top we can use the use Gap hook and we can create a callback function and then an empty dependency

Speaker A

array right here we can say Gap Dot and for the first time ever we'll use the from property instead of to property because we're animating it from a specific position so here we can say what do we want want to animate it's

Speaker A

going to be the ID of Chip and we have to import Gap from Gap here we can give it some scroll Properties by saying scroll trigger and the trigger will be the actual chip so once we reach it and

Speaker A

we're going to start on about 20% from the bottom and we want to animate from opacity of zero scale of two duration of two as well and ease of power two.

Speaker A

inout now if we save it you can see it's gone and then it comes in as simple as that let's reload that and see it one more time there we go that's looking great now let's go below the chip and

Speaker A

below the div and create another div with a class name equal to flex Flex that D call items D Center and right within it we can create a new H2 property with a class name equal to hiw which means how it works title like this

Speaker A

and we can say something like let's do A7 Pro chip like this and then we can add a Break Tag and then say a monster when for gaming so now you can apparently game on your phone as well below it we want to have a

Speaker A

P tag with a class name equal to hiw subtitle and here we can say it's here the biggest redesign in the history of apple gpus and save there we go that's more like it now below it we want to show that

Speaker A

huge video which will be playing right here so let's scroll down let's go below the P tag and Below one more div and create a container for our video player we can do that by saying div with a

Speaker A

class name equal to margin top of 10 on medium devices margin top of 20 and a margin bottom of 14 within it we can give it a div with a CL class name equal to relative h- full for full height and a flex Das Center

Speaker A

within it we can have one last div with a class name equal to overflow Das hidden and within it we can render the image so this will be a self-closing image with a source equal to frame IMG coming from utils an Al tag of frame and

Speaker A

a class name equal to BG D transparent relative and Z of 10 so now if we save it you can see this iPhone looking frame we want to place the video right within it so right below this image we can have another div with a

Speaker A

class name equal to hiw video and right within it we can create a new video property with a source of SRC frame video and a type of video MP4 now it appears at the bottom of it but let's style it a now currently it

Speaker A

appears at the bottom of it and that's because we should have put it below this div closing the image so here we have the image and then we go one div down and then paste it right here here now it

Speaker A

fits perfectly within the image let's also style this video property by giving it a class name equal to pointer-events dnone let's give it a plays in line a preload of none a muted property autop playay and we can also give it a ref

Speaker A

equal to video ref which we need to of course create at the top by saying const video ref is equal to use ref coming from react which we of course have to import now if we save that you can see that the video

Speaker A

starts autop playing of course we'll kind of animate it so that it looks better even on larger devices now we want to add a bit of text at the bottom so we can scroll below the video and then below one two more divs and here we

Speaker A

want to do a P tag that says honai St rail this is apparently a very good game that runs on this specific chip we can style it by giving it a class name of text- gray font D semi bold text- Center and a

Speaker A

margin top of three to divide it a bit from the phone now right below it we want to have a couple of pieces of text that nicely slides in and this text is quite similar to the text that we had in

Speaker A

the previous section so let's go to the app go to features and let's just copy these two pieces of text there we go div text container as a matter of fact we can copy the entire text container from here to here and

Speaker A

then paste it right within how it works below this P tag now if we save it and go back you won't be able to see it yet because it's hidden by default so let's style it a bit instead of saying feature text

Speaker A

container we can rename it to hiw which means how it works text container then it can have a property of flex Flex D1 and in this case we can do justify Center and flex-all next instead of feature text we

Speaker A

can have an hiw text there we go and we can call it g fade in because we want to fade this text in and here we can say something like a77 Pro is an entirely new class of iPhone chip that

Speaker A

delivers our space and then in white we can say something like best graphic performance by far we can delete this thing after this pan and then we have the second div which we can remove and just have a

Speaker A

P tag that says hiw text we can say something like mobile within the span games will look and feel so immersive and then after the span we can say something like with incredibly detailed environments and characters now if we save it you can see

Speaker A

this text right here but we cannot yet see this one that's because this one also has to say fade in and then both will be gone and we'll be able to animate them once we scroll in before we do that let's also add this

Speaker A

one new Pro class GPU with six cores that's going to be below this div containing the P tag it's going to be a special div with a class name equal to flex D1 Flex justify Das Center flex-all and Gore fade in as well within

Speaker A

it we can have a P tag that will say something like new and it will have a class name equal to hiw text now we can duplicate this two more times the second one will say Pro class GPU and the third one will say with six

Speaker A

course now if I save it we cannot yet see it because it also will fade in in the middle one will have a class name of big text because we want it to appear like this so now let's go ahead and fade

Speaker A

those in we can do that by scrolling up going below this Gap from and calling our reusable function animate with gap we want to animate anything with a class of G fade in make sure to add a DOT at

Speaker A

the start as it's a class and then we can provide opacity of one y position of zero duration of one and ease of power 2.

Speaker A

inout if we save it you can see all of these nicely scroll in now it looks like this is not properly positioned so let's position it properly if we scroll down you'll notice that we have this div closing the video and then one more div

Speaker A

which closes this video context and then below it we have the honai star rail but what needed to happen here is we need to close this previous div so here we close another div and then right below at the

Speaker A

end we can remove one closing sign this will now properly position it all also looking at this part at the bottom it seems like it's too close to what we have at the top so let's see if it's in

Speaker A

the right container we have this hiw text container and it looks like I ended it a bit too soon it should have been ended right here at the bottom so if I fix this now this looks better so let's

Speaker A

expand it to see it on full screen I'm going to scroll up and reload and now I'm going to smoothly scroll down you see the chip animate you see this video play looks much better on the big screen and then we have the text right

Speaker A

here oh let's see if this text is looking good it looks like the positioning is a bit off as you can see right here it looks like we didn't properly close these two first pieces of text together so let's do that by taking a

Speaker A

look at this one and then we have to close it right below this B tag now if we do that you can see it looks great we cannot get to the second piece of text because we don't have the footer

Speaker A

yet but we will soon and it will look like this so with that in mind let's quickly get the footer going as well it will be quite simple we just have to go to the components and create a new footer do jsx component where we

Speaker A

can run RFC and we can just render this footer right here of course it has to be imported at the top footer coming from footer there it is at the bottom left we can dive into it and we can develop it

Speaker A

by enclosing it within an HTML 5 footer property with a class name equal to padding y of five on small devices padding X of 10 and usually padding X of five as as well let's also bring this back to the

Speaker A

mobile view so we can see what's happening within this footer we can have another div for the max screen width by saying class name is equal to screen- max-width within it we can have another div for our first part of the footer within it

Speaker A

we can have a P tag that will say more ways to shop there we go more ways to shop Let's style it a bit by giving it a class name of font Das semibold text- gray and text- Xs for extra small then within

Speaker A

this speed tag we can have a span that will have a class name equal to underline in text- blue to signify it's a link we can add a space beforehand and say find an Apple store we can also add a space exit the

Speaker A

span so that looks like this right now and this space can be outside so it doesn't get an underline right here there we go and then out of the span we can say or and then once again within this same span so we can simply

Speaker A

copy it and paste it we can say other retailer and then exit out of the span near you there we go so this looks good we need to provide some spacing so after or and after the span some space we can

Speaker A

go here and duplicate this P tag one more time right below the first one and properly close it and here we can say something like or call and then we can do some kind of a a phone number I'm just going to type some

Speaker A

random stuff right here there we go this looks good to me now we want to go below this P tag and below this div and create just a self-closing div which will act as a divider line by giving it a class

Speaker A

name of BG neutral of 700 margin y of five h-1 pixel and w- pool this will give us a nice divider line and right below it we can show all of the footer links so to do that we can just say div

Speaker A

with a class name equal to flex on medium devices Flex D row Flex Das column on smaller devices on medium devices items Das Center and justify Dash between within it we can have a A P tag that will have the same class name as

Speaker A

the one above so we can copy that class name font semi bold text Gray and text Xs and we can say something like copyright 2024 Apple Incorporated All Rights Reserved there we go and finally we can have a div below this speed tag with a

Speaker A

class name of flex and here we can map over our footer links so footer links coming from constants map where we get each individual link and for each one we can return a P tag with a key equal to

Speaker A

link same class name once again as the previous one and within it we can render a link and then a space after the link that will look like this and you have all of the links right here now you can notice that after sum we

Speaker A

don't have space so we can say if I is not equal to footer lengths dot length minus one so if it's not the last one then also add a span with a class name of margin X of two so

Speaker A

MX2 and add a straight line like this and this will create some spacing but of of course make sure that you're properly closing everything and in this case we also have to get the index as we're mapping over it and now if you scroll

Speaker A

down you can see this great looking footer and of course you can turn these into links once you actually have somewhere to navigate and with that said our footer is done but it's not just the footer it's our entire Gap 3js and

Speaker A

Sentry powered website and now is the the time that we deploy it it's time to share this wonderful looking hero section that animates in this highlight section which we worked so hard on this great looking 3js model section as well

Speaker A

as the explore the full story and materials the chipset and even the footer it's time to get it all deployed and on the internet so you can share it with everyone to start deploying our Apple website head over to your

Speaker A

hostinger dashboard find the project and head to its file manager now you can go into the public HTML and remove this default PHP by deleting it then we'll be able to upload our entire codebase so back within our Visual Studio code you

Speaker A

can stop our terminal from running by pressing contrl C and then clear it next head over to package.json and within here we can see that the build script is MP mpm run build so let's type mpm run build which will run an optimized

Speaker A

production build of our application there we go in about 8 seconds it is done so now if you close this up and head to the file explorer if you collapse it you'll be able to see a new this folder appear which if you right

Speaker A

click you can reveal in finder or open in file explorer once you open it you can go into it copy all of the files and simply drag and drop them within this empty folder on our H panel this should

Speaker A

take just about a minute maybe even less and as soon as it is done we can go back to our specific projects dashboard and click our chosen domain name just like that our project is now deployed and live on the internet it took less than a

Speaker A

minute now we can scroll through it and admire it in its full Glory with this phenomenal highlight section not to mention that we also have this great looking Apple iPhone logo and the Apple iPhone title and our domain is https

Speaker A

secured let's continue scrolling down a bit to take a closer look at our 3D model this is looking phenomenal let's not forget that we can also change the colors which are immediately reflected right here and let's see how Gap and 3js

Speaker A

work together by an animating this model there we go that's more like it now let's continue and see this section where we can see this titanium in more detail learn more about the A7 Pro chip and then see the footer with all the

Speaker A

links of course let's not forget that the entire project is completely mobile responsive so if I open up my inspect element and collapse this just a bit you can see how in mobile we get a completely different view with the

Speaker A

Highlight section videos appearing like this 3D model looking like this and all of the other sections seamlessly fitting into the view wonderful so with that in mind huge thanks to you for coming to the end of this video and congratulations be proud

Speaker A

of yourself that you built something like this and if you liked what we were building here you will love what we do on JSM 3. Pro specifically our ultimate NEX gs14 course I can proudly say that it is the best course out there to make

Speaker A

you the top one NX GS developer we follow what the best companies in the world are doing and how they're using nextjs they're not using it like good old react because then they would fall into a trap of using the client side on

Speaker A

everything and having bad performance accessibility and SEO thankfully I'm going to teach you how to use it like your real Pro we'll do a deep down to fully understand how it works behind the scenes then we'll build and deploy a

Speaker A

very complex app and you'll also get a chance to participate in active lessons where we give you complete hints and then you have to build a specific feature everything from task to examples think resources and even hints on

Speaker A

developing something so you can truly understand what you're doing and of course you're going to build one of the best apps out there a modern version of Stack Warlow so with that said what are you waiting for go to JS master. proo and

Speaker A

check out our ultimate next js14 course I'll see you there

Topics:ReactGSAPThree.jsJavaScript animation3D web developmentApple website cloneiPhone 15 Pro cloneweb animation tutorialweb deploymentperformance monitoring

Get More with the SozAI App

Transcribe recordings, audio files, and YouTube videos — with AI summaries and speaker detection. 30 minutes free.

App Store Google Play

Or transcribe another YouTube video here →

Free tools: TXT to SRT · SRT Validator · Merge SRT · Subtitle to Text · All tools