-------------------------------------------------------------------------------- Starter CODE👨💻: ➡ Link 💚: github.com/codebucks27/Apple-iphone-3d-landing-page-starter-Code Final CODE👨💻: ➡ Link 💚: github.com/codebucks27/3D-Landing-page-for-Apple-iPhone Buy me a coffee and Support this channel🥰: www.buymeacoffee.com/CodeBucks --------------------------------------------------------------------------------
Dude! You're a beast! I was starting to worry since you have been quiet for some time. Your uploads always excite me. You're a very talented developer and glad to finally hear you talking the steps over the video. Nice project and thanks for sharing your knowledge 🔥
Use "markers: true" and check the intersection between the browser and the Quote page. If the intersection is right then check the z-index for hero page.
Hey, I have checked local build and it's working fine but somehow it's not working in the netlify. I have tried with vercel and it worked you can check it from here: apple-iphone14.vercel.app/ I don't know why there is problem in netlify build.
Great video! However, there is a potential issue that you may come across. The iPhone model is set to position fixed, and its size is based on the viewport size. If you add any buttons in that section, they may not be clickable.
Hey, I'm glad you liked this. No, there is no technical requirement to use h1 tag only for once in a single page. If you are using HTML5 then you can use multiple h1 tags.
@@CodeBucks Hello! Can you help with project a little please? I have problem n the Color section... My scroll animation works only when I scroll the page from bottom to top, but not when I scroll from top to bottom :( when I scroll from top to bottom there's no any color section at all :(
hey do you have a discord community or patreon where enthusiasts who are currently learning from ur videos can share their doubts and resolve them amongst themselves
Nice video mate, but everytime i installed style-components i have to written them completely.i didnt get shortcut or anything and it feels like i wrote a story in orange color not a code.please help me out
Install this extension in VScode => marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components. Now you can easily write CSS in styled components and you will get different color as well.
Hey, I have checked it again in my device and it's rendering the iPhone model but if you try to use older mobile phones or smartphones with less capability in terms of processor and ram then you might face delay or glitch in rendering this model. You can optimize this by using web workers to load this 3d model.
@@CodeBucks I have an iPhone 13 Pro Max and only the very small model appears on my mobile, but on my Android smartphone, it runs fine, how can I solve it?
Brother can you make a website builder clone ( like WordPress or wix) with node and react.. that do all the basic stuff that is needed to create a website... It will be very grateful
Hi... please for my coloSection, the animation is not working in the normal top to bottom direction but it works in the reverse direction(that is it works from bottom to top). What can I do please?
Check your code again and see if you have used forEach loop properly on elements. Also log the elements ("li") and see if you can get the list of all li elements.
@@CodeBucks Thank you. After i check the final code i solve the problem but now when i try to add the modal into color section , it says Failed to parse URL from ./scene.glb and it also fails building process. I couldn't find any solution for this. const { nodes, materials } = useGLTF("./scene.glb"); materials.Body.color.set(color);
@@CodeBucks Actually i did exactly the same things but it doesn't work either. I used Nextjs and tailwind nevertheless i don't think its related. gltfjsx usage may change because after i transformed the object it created "scene.glb" file not gltf.
@@mahbubmorshed9527 I checked the error it is happening because you might have to latest version of the NodeJS you can use nvm tool for windows to install the old version of NodeJs and use it. I have Node 17.2.0 and the gltfjsx is working in this version of the NodeJs.
@@CodeBucks yep. I'm using android to develop and when i try import anything from react three drai, for instance import { useGLTF } from "@react-three/drei"; i get errors
thanks god and my mind! i solved this by deploying project to vercel and just pushed all changes i did. As to say, on my localhost the project das not work, but if i deploy it everything is ok))
![VENEZUELA vs. ARGENTINA [1-1] | RESUMEN | ELIMINATORIAS SUDAMERICANAS | FECHA 9](http://i.ytimg.com/vi/SJfoPdeOPCQ/mqdefault.jpg)
--------------------------------------------------------------------------------
Starter CODE👨💻:
➡ Link 💚: github.com/codebucks27/Apple-iphone-3d-landing-page-starter-Code
Final CODE👨💻:
➡ Link 💚: github.com/codebucks27/3D-Landing-page-for-Apple-iPhone
Buy me a coffee and Support this channel🥰:
www.buymeacoffee.com/CodeBucks
--------------------------------------------------------------------------------
Dude! You're a beast! I was starting to worry since you have been quiet for some time. Your uploads always excite me. You're a very talented developer and glad to finally hear you talking the steps over the video. Nice project and thanks for sharing your knowledge 🔥
I'm glad that you liked it. Also sorry for the late upload I'll try my best to upload more awesome content😄
Man, you are the best . Your talent in frontend and the project that you made are really incredible .I hope you enjoyed it.
Thanks for your kind words! Yes I did enjoy creating these videos.
19 k people like you deserve more subs man.
Thanks for the appreciation😇
awesome video but facing many issues at the beginning flex and animation not working do you resolve it
Sure let me know what issues you are facing.
var(- -xxx) not apply
I'm using variables which you defined in styleComponent but they are not @@CodeBucks applying the tags
This is really impressive!
I'm glad you liked it😇
Hello friend, thanks for the tutorial.. i cant enter to the result deploy link...
Did you mean, "You cannot deploy your project?"
Bro this is fantastic🔥 the greatest build ever saw , can u try next on unique e-commerce design ??
Thanks and sure I will try new design for Ecom. 😄
You are awesome! So much to learn from you! May god bless you 🙏
Glad to hear that 😄
hey on pinning the section on scroll trigger use the quotes page doesn't load at first until I scroll down to the herosection and then come back again
Use "markers: true" and check the intersection between the browser and the Quote page. If the intersection is right then check the z-index for hero page.
Stunning animations, keep going 🔥
Thank you! Will do!😄
Glad you back
Would love something with reactjs and tailwindcss . Thanks
Sure thing! I will use tailwind for my future videos. 😉
thank you for this vedio
Most welcome😇
U are just killer programmer 👾 ~
Thanks😉
I appreciate you too much 💗
Thanks for the application 🍻
the website shows a blank white screen. i deployed to netlify. your build does the same thing. any ideas?
Hey, I have checked local build and it's working fine but somehow it's not working in the netlify. I have tried with vercel and it worked you can check it from here: apple-iphone14.vercel.app/
I don't know why there is problem in netlify build.
Thanks, nice work bro
Glad you liked it 😄
Love the typo in your thumbnail!
Oh thanks for letting me know!😂 I'll update it.
@@CodeBucks Cheers, I did a full year of proof reading, and since then, my eye simply locks on those things (obviously except my own work) Good luck!
@@code.design Your keen eye for proofreading sounds like a superskill. Cheers!
love it bro ❤❤
Thanks 🔥
Thank you so much for this
I'm glad you liked it 😊
Hi , I get error in the cmd when I run gltfjx scene.gltf , tho i tried new version and the old , what should I do?
What error are you getting? You could also try their website from here: gltf.pmnd.rs/
Great video! However, there is a potential issue that you may come across. The iPhone model is set to position fixed, and its size is based on the viewport size. If you add any buttons in that section, they may not be clickable.
Can you tell me any specific section in which you faced the problem?
Really cool project! Thank you so much for that!! :)
Also I wanted to ask about element: shouldn't we only use it once on the page?
Hey, I'm glad you liked this. No, there is no technical requirement to use h1 tag only for once in a single page. If you are using HTML5 then you can use multiple h1 tags.
@@CodeBucks didn't know that! Thank you for explanation! 😊
@@CodeBucks Hello! Can you help with project a little please?
I have problem n the Color section... My scroll animation works only when I scroll the page from bottom to top, but not when I scroll from top to bottom :( when I scroll from top to bottom there's no any color section at all :(
@@margooo1511 Hey,
make sure you have added the scrub property in the gsap/scrolltrigger code.
@@margooo1511 Hi, I also have this exact issue, how did you resolve it please?
start follow your tutorial
hey do you have a discord community or patreon where enthusiasts who are currently learning from ur videos can share their doubts and resolve them amongst themselves
also is there a way to scene.rotation value in real time
hey, right now there is no such thing available but I'm considering to create one soon.
@@WebSpyder32 What do you mean by real-time? Can you explain what you are trying to achieve?
Superrrr doooper awesome 👍
Thanks🤩
@@CodeBucks bro make some awesome portfolios also using react, GSAP with cool animations
Something unique like nothing on RUclips
@@hassaantahir3861 Thank you so much for the appreciation it means a lot.
@@CodeBucks no worries bro
wowww so usefull!!
thanks!
Glad you liked it 😄
three.js is mandetory for this project?
Yes but not directly threejs,.Instead for react I have used react-three-fiber and react-three-drei.
Nice video mate, but everytime i installed style-components i have to written them completely.i didnt get shortcut or anything and it feels like i wrote a story in orange color not a code.please help me out
Install this extension in VScode => marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components. Now you can easily write CSS in styled components and you will get different color as well.
Just a bomb!!! Thank you!
I'm glad that you liked it😄
the build is working perfect on desktop but the iphone animation wont render on mobile
Hey, I have checked it again in my device and it's rendering the iPhone model but if you try to use older mobile phones or smartphones with less capability in terms of processor and ram then you might face delay or glitch in rendering this model. You can optimize this by using web workers to load this 3d model.
@@CodeBucks I have an iPhone 13 Pro Max and only the very small model appears on my mobile, but on my Android smartphone, it runs fine, how can I solve it?
Brother can you make a website builder clone ( like WordPress or wix) with node and react.. that do all the basic stuff that is needed to create a website...
It will be very grateful
Hey, creating website builder takes lot of time then simple websites.
@@CodeBucks not fully 100 like WordPress but with only core functionalities ...
You can make a series of 4-5 videos .. 😇
You are my hero
Thanks for the appreciation. It means a lot😄
I am getting this error export 'DataTexture3D' (imported as 'DataTexture3D') was not found in 'three'
Can you tell me in which component are you getting the error?
resolution of rendered 3d model is very low quality please help
Hey, Refer this documentation and especially the "Performance scaling" section:
docs.pmnd.rs/react-three-fiber/advanced/scaling-performance
@@CodeBucks ok thanks
Hi... please for my coloSection, the animation is not working in the normal top to bottom direction but it works in the reverse direction(that is it works from bottom to top). What can I do please?
Hey, make sure you have scrub in the scrolltrigger. Add scrub:1 and check it again.
@@CodeBucks I am having same issue, and this did not solve it. I know it's someting small that im overlooking. any tips?
@@dimi9431 Hey, I'd suggest try different values in parameters of gsap scrolltrigger. Try 1 for scrub. Also checkout the documentation of the gsap.
You are just alien D:>>> 👽
Which type of alien? lol😂
@@CodeBucks an animation alien 😄
@@emmanuelbabawale7216 Right😂
really bro Thanks
You're welcome 😄
at 2:08:00
it says 'el' is not defined
what should I do ?
Check your code again and see if you have used forEach loop properly on elements. Also log the elements ("li") and see if you can get the list of all li elements.
it works :)
When i try to change the position of model, it only turns around itself. Anyone know how can i solve this ? 1:11:00
Try to go ahead with the tutorial and still if you face the issue then change the height of the container.
@@CodeBucks Thank you. After i check the final code i solve the problem but now when i try to add the modal into color section , it says Failed to parse URL from ./scene.glb and it also fails building process. I couldn't find any solution for this.
const { nodes, materials } = useGLTF("./scene.glb");
materials.Body.color.set(color);
@@secenory2473 Use useLayoutEffect to change the material like shown in the final code repo. Also, it's just "/scene.gltf" so remove the dot.
@@CodeBucks Actually i did exactly the same things but it doesn't work either. I used Nextjs and tailwind nevertheless i don't think its related. gltfjsx usage may change because after i transformed the object it created "scene.glb" file not gltf.
@@secenory2473 If you are using next.js then you must add media files in the public directory otherwise it won't be able to fetch the file.
when I run gltfjsx scene.gltf it makes type error: fetch failed, solution
Make sure you use npx and not npm and also you should be in the repository where the model files are situated.
@@CodeBucks No result bro 12 hours of stack not solving error
@@mahbubmorshed9527 Hey can you send me screenshot of error on my email @ codebucks27@gmail.com
@@mahbubmorshed9527 I checked the error it is happening because you might have to latest version of the NodeJS you can use nvm tool for windows to install the old version of NodeJs and use it. I have Node 17.2.0 and the gltfjsx is working in this version of the NodeJs.
@@CodeBucksI want to use new version of nodejs. how we can solve this issue, or alternatively what we can import our model ?
Are you on patreon as well??
Hey, Do you mean in terms of community/membership?
@@CodeBucks yes!
Okay. No right now my focus is on creating more cool content so I haven't started anything regarding membership.
really great project to learn something new, would do this project after lab minors 🙂 (29) sept 🥲, before that complete pending projects 🥲
I'm glad that you liked this project.😄
🎉🎉🎉somebody has the same error??? Can't resolve 'three' in node module🎉🎉🎉 just answer yes or no
Hey, can you tell me in which component you are getting this error?
@@CodeBucks yep. I'm using android to develop and when i try import anything from react three drai, for instance import { useGLTF } from "@react-three/drei"; i get errors
@@takecontrol554 Okay. Have you matched the final code with your own code?
@@CodeBucks sure. i soppose this library is not working on android devices
thanks god and my mind! i solved this by deploying project to vercel and just pushed all changes i did. As to say, on my localhost the project das not work, but if i deploy it everything is ok))