the only tutorial among all the world of searches that I have done that explains gsap together with react, it is incredible, I love how clean this design is. We look forward to more of this, thank you very much
Wow. You are so freaking underrated my man. You gained a sub and a notification bell. Btw, is the website fully done in the video? Or it ahs missing parts? But dam, you talented and helpful. Would love if you were to do voice overs and explaining haha. more work but yea. Satisfied af with what you posted here. Thank you!
I just finished this awesome project and I have no doubt to say that This is the Best tutorial project I have ever done. Thank you so much. I always want to learn smooth scrolling and animation and you help me a lot to understand these kinds of concepts so thank you. can you make this a full-stack project if possible coz I am looking forward to making this one so cool
Hey, Congratulations🎉 for completing the whole tutorial. That's actually a big deal. Also, Thank you for appreciation🍻. I'll try my best to create full-stack project in the future😄.
No, I have not taken any inspiration from any single source but yes I have seen some websites with similar layout but for animations and smoothness I have implemented it by myself.
Wonderful tutorial, something I have been looking out for a long time. Can you please make a similar one with React 18 or just update the app with React 18?
Thank you for this comprehensive tutorial! Small question, why at 9:35 you put a margin and padding at 0 on the h1,h2,h3,h4,h5 when you have already put it "*, *::after, *::before " ? (Sorry for my eng)
Very nice project, Thanks you very much ! i play with all the const i have just one question : what is the extension to have choice (emmet i think?) inside the `` ? (like in 38:39)
Yeah emmet and also the vs code extension for the styled-component which you can find from here: marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components
Hi, Thanks for this great tutorial. Just a quick solution needed please-- while attaching the footer elements to the sections, the landing page is after the scrolled part..for example we attached the shop section and it brings to the ending part
Hey, I have to check about that. In the mean time you can check this documentation and see if there is something that can help you with the scroll positions.
@@CodeBucks Yah i really liked it. Awesome video . And the cool bg music gives a vibe 😉. Just wondering how suddenly the overflow of scroll bar dissapeared here 2:16:50 on the right of the screen?
Good guide but the whole experience would be better if it were narrated. You should also let folks know that your design is not 100% responsive, it breaks when narrowing the browser window, just my two cents
Hey, thanks for your feedback. I appreciate it. I have started adding voice over in the last few videos, you can check them and I'll make sure to incorporate your feedback for my future videos as well. 🍻
Hey, that's good question. We need to refresh it because we are using locomotive-scroll along with the gsap scroll-trigger. So right now whole control is with the locomotive scroll so whenever we scroll the application we have to refresh the scroll trigger in order to re-calculate element's position.
For auto importing i use marketplace.visualstudio.com/items?itemName=steoates.autoimport. For CSS I use marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components
When you add Shop after the NewArrival add [end: `${pinWrapWidth} bottom`,] instead of just [end: pinWrapWidth,]. It will give enough height to that container. Right now if you keep markers:true and see that end is comming before the start so that's why it is not pinning the Shop section.
excuse me, I stackedwith npm install at the beginning when trying to install repository. I cloned the rep but when I try run npm install it doesn't work. Thank you
@@CodeBucks in video at 5 minute you show how to install repository. I tried to follow your commands but my PC shows me an error that I provided above. Sorry for inconvenience. Maybe do I need to install javascript before to something else. I'm new at the field of web development, just trying to study, thank you for your great work.
@@shillingv6289 Hey, you have to install the node.js first and after that install git as well. Once you install the node.js then you will be able to use the npm and git commands from your terminal.
sir it's humble request please will you please explain while coding it will be helpful for newbie like me , thanks a ton for such great content , please consider my suggestion ♥️
For some reason it doesn't work when there are two elements with horizontal scrolling on the page. I inserted two identical components, the second one does not work.
Make sure to add another scrolltrigger for different component. Keep markers:true in both of the components in scroll-trigger settings and observe their behaviour.
Hey, you can push your code into github then connect it with the netlify. I have created tutorial on how you can host React apps on netlify you can see it from here: ruclips.net/video/OG71ARNRPT4/видео.html
Have you checked by using markers: true? Also make sure to check the start and end value for the shop component that you are using for the scroll. Match your code with the final code.
@@CodeBucks hey thanks for replying. I solved the issue by using id in main class rather than className and by setting end: `bottom ${pinWrapWidth}`. Great Tutorial btw.!
@@CodeBucks is it hard to learn JavaScript libraries? like learning a new language? or it's easier? by the way can i take your number or Instagram or anything else, I want to consult you in something.
@@developer_hadi No it's not that hard to learn library or framework if you have knowledge of basics of Javascript and you have already build few apps using it. You can dm me on twitter or insta. Link is in the description.
my screen just got blank when horizontal scroll started and then banner section with quotes overlaps the shop section :( does anyone have any idea what could be doing wrong?
@@CodeBucks I am using tailwind css for styling. not sure if it is correct way of showing code or not 😅 import { motion } from 'framer-motion'; import gsap from 'gsap'; import ScrollTrigger from 'gsap/ScrollTrigger'; import { useLayoutEffect, useRef } from 'react'; import img1 from '../assets/images/img1.webp'; import img2 from '../assets/images/img2.webp'; import img3 from '../assets/images/img3.webp'; import img4 from '../assets/images/img4.webp'; import img5 from '../assets/images/img5.webp'; import img6 from '../assets/images/img6.webp'; import img7 from '../assets/images/img7.webp'; const Shop = () => { gsap.registerPlugin(ScrollTrigger); const ref = useRef(null); const horizontalRef = useRef(null) useLayoutEffect(() => { let element = ref.current; let scrollingElement = horizontalRef.current; let pinWrapWidth = scrollingElement.offsetWidth; let t1 = gsap.timeline(); setTimeout(() => { t1.to(element, { scrollTrigger: { trigger: element, start: "top top", end: `${pinWrapWidth} bottom`, scroller: "#App", //locomotive-scroll scrub: true, pin: true, // markers: true, // anticipatePin: 1, }, height: `${scrollingElement.scrollWidth}px`, ease: "none", }); t1.to(scrollingElement, { scrollTrigger: { trigger: scrollingElement, start: "top top", end: `${pinWrapWidth} bottom`, scroller: "#App", //locomotive-scroll scrub: true, // markers: true, }, x: -pinWrapWidth, ease: "none", }); ScrollTrigger.refresh(); }, 1000); ScrollTrigger.refresh(); return () => { t1.kill(); // ScrollTrigger.kill(); }; }, []); const Product = ({img, title = ''})=>{ return(
{title} ) } return (
New Collection {/* left side */}
The brand new collection is currently being developed in USA. We create our products using best quality material, including the use of some of the pure fabrics to make our products. All products are made using the best materials, from the finest cotton to the finest fabrics.
We have lots of different clothing options like shoes, jackets and dresses. Not only clothes but we also provide unique Jewellery as well. It is great for us to carry our new clothes all around the country and look different.
@@nidafatimaiscooking In scroller you are keeping the "#App". Make sure that you have App as id in the main element of the App.js file. If you have App as className then write ".App" and not "#App". Check this out and let me know if you still have this error.
@@CodeBucks yes it is id="App" on the main element, I think issue is with pin property. Whenever I enable pin= true this issue happens. Don't know why. And if I disable it horizontal and vertical scroll happen simultaneously.
----------------------------------------------------------------------------------------------------------- Starter CODE: github.com/codebucks27/wibe-studio-starter-files Final CODE: Get Website from below Link 👇 ➡ Link 💚: github.com/codebucks27/wibe-studio (Give ⭐ to this repo if you like it) 🔰[Click Above Link to get the final code]🔰 -----------------------------------------------------------------------------------------------------------
![🔥Create an NFT Collection Website Landing page with React JS [Mobile Responsive]](http://i.ytimg.com/vi/edr2o59Twrs/mqdefault.jpg)
![🔥Create an NFT Collection Website Landing page with React JS [Mobile Responsive]](/img/tr.png)
the only tutorial among all the world of searches that I have done that explains gsap together with react, it is incredible, I love how clean this design is.
We look forward to more of this, thank you very much
Thank you so much for the appreciation. 😇
Sure I will upload good videos soon.
Merci beaucoup !!!!
Can someone help me with the scroller
Wow. You are so freaking underrated my man. You gained a sub and a notification bell. Btw, is the website fully done in the video? Or it ahs missing parts?
But dam, you talented and helpful. Would love if you were to do voice overs and explaining haha. more work but yea. Satisfied af with what you posted here. Thank you!
Thanks for the appreciation it means a lot.🥂
Yes website is fully done in the video.
Will try to do voice over.
Please don't take it lightly when i say you have the BEST tutorials on RUclips 🙌🏼
Thanks, man🥂. it means a lot.
I already liked it without watching, u were that good in previous videos
Wow! Thank you so much😇
I just finished this awesome project and I have no doubt to say that This is the Best tutorial project I have ever done.
Thank you so much.
I always want to learn smooth scrolling and animation and you help me a lot to understand these kinds of concepts so thank you.
can you make this a full-stack project if possible coz I am looking forward to making this one so cool
Hey, Congratulations🎉 for completing the whole tutorial. That's actually a big deal.
Also, Thank you for appreciation🍻.
I'll try my best to create full-stack project in the future😄.
Hello Shubham can you plz provide me the code
Hello Shubham can you help me with the scroller?
Thank you! I enjoy writing code with you.
Happy to hear that!😄
Hey bro from where you take design inspiration or is it all your creativity
No, I have not taken any inspiration from any single source but yes I have seen some websites with similar layout but for animations and smoothness I have implemented it by myself.
The case when everything is clear without words) Thank you!
Glad you liked it😇
Underrated channel! Love your content 🔥
Thanks😄
Wonderful tutorial, something I have been looking out for a long time. Can you please make a similar one with React 18 or just update the app with React 18?
Hey, I'm glad you liked the tutorial. Yes soon I will update the github repo to React 18.
Hey CodeBucks, your tutorials are awesome thanks for this brother.
Hey. I'm glad you liked it😇
Leaving a comment here for my reference
Thank you for this comprehensive tutorial!
Small question, why at 9:35 you put a margin and padding at 0 on the h1,h2,h3,h4,h5 when you have already put it
"*, *::after, *::before " ?
(Sorry for my eng)
Sometimes h1 tag's default properties don't inherit the global styles so for that i have again declared the same style for all the tags.
@@CodeBucks Interesting, thanks !
Plz do fullstack of project, this is so awesome, sir
Sure.
Excellent tutorial!
Btw, what's your VS code theme,? it looks awesome.
Hey, I'm using Aura theme. You can get it from the Vs code marketplace 😄
Very good video only one things missing is explanation ..
Sorry for that, as you can see from last few videos I have started adding voice over.
Very nice project, Thanks you very much !
i play with all the const
i have just one question : what is the extension to have choice (emmet i think?) inside the `` ? (like in 38:39)
Yeah emmet and also the vs code extension for the styled-component which you can find from here: marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components
@@CodeBucks Thanks you very much, that's awewsome
bhai superb fantasatic mind blowing ...............site .
Thanks bro😇
Omg tysm i always wonder how they make a smooth website
You can try this tutorial and add your own creativity I'm sure you'll have beautiful website😄
u r just better
Amazing
Thanks!
great page
$hearts
Hi, Thanks for this great tutorial. Just a quick solution needed please-- while attaching the footer elements to the sections, the landing page is after the scrolled part..for example we attached the shop section and it brings to the ending part
You mean the scrolling in the shop section isn't working?
Thank you for the video!!
Welcome!😇
Thanks! Can you do something similar with routing and updating locomotive state in different pages? Many people have isues with it
Hey, I have to check about that. In the mean time you can check this documentation and see if there is something that can help you with the scroll positions.
Thanks! Cool! More please!
Will do😇
Hidden gem ✨💖
Glad you liked it!
@@CodeBucks Yah i really liked it. Awesome video . And the cool bg music gives a vibe 😉. Just wondering how suddenly the overflow of scroll bar dissapeared here 2:16:50 on the right of the screen?
You guys are awesome that was great work
Thank you so much😇
@@CodeBucks no thank you for this Course but do it by explaining that then that will give more boost on learning and thank you for this awesome video
@@nepalesetiktok8195 Sure😄
Good guide but the whole experience would be better if it were narrated. You should also let folks know that your design is not 100% responsive, it breaks when narrowing the browser window, just my two cents
Hey, thanks for your feedback. I appreciate it. I have started adding voice over in the last few videos, you can check them and I'll make sure to incorporate your feedback for my future videos as well. 🍻
Hi ...!! Why we have wrote ScrollTrigger.refresh() in setTimeout ?? In 1:44:54
Hey, that's good question. We need to refresh it because we are using locomotive-scroll along with the gsap scroll-trigger. So right now whole control is with the locomotive scroll so whenever we scroll the application we have to refresh the scroll trigger in order to re-calculate element's position.
@@CodeBucks ok tysm for clearing doubt ❤️
@@CodeBucks When I scroll towards the New Arrivals component why did my screen get white blank ..but it's is still scrolling...??
Maybe you should add pinSpacing: false in your new arrivals gasp scrolltrigger code.
@@CodeBucks okay 👍
Brava
Amazing, but i wish it have timeline like yours vid about crypto website
Hey, I have added the timeline😇
@@CodeBucks love it
what extension do you have for auto importing libraries and css properties?
For auto importing i use marketplace.visualstudio.com/items?itemName=steoates.autoimport.
For CSS I use
marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components
@@CodeBucks thanks a lot bro!
Please make a tutorial for your devdreaming website
will create similar tutorial in the future but for now you can check the blog tutorial it's almost the same.
for some reason when i put it like this order
the shop is not working as intended , it appear the shop intermediately ?
I have same problem too
When you add Shop after the NewArrival add [end: `${pinWrapWidth} bottom`,] instead of just [end: pinWrapWidth,]. It will give enough height to that container. Right now if you keep markers:true and see that end is comming before the start so that's why it is not pinning the Shop section.
Checkout my reply.
Thanks bro, subcribe for life
@@XuanThanh-mj5py Thank you💛
excuse me, I stackedwith npm install at the beginning when trying to install repository. I cloned the rep but when I try run npm install it doesn't work. Thank you
Hey, could you provide the error message that you are getting while running this command?
@@CodeBucks 'npm' is not recognized as an internal or external command,
operable program or batch file. (windows 10)
@@CodeBucks in video at 5 minute you show how to install repository. I tried to follow your commands but my PC shows me an error that I provided above. Sorry for inconvenience. Maybe do I need to install javascript before to something else. I'm new at the field of web development, just trying to study, thank you for your great work.
@@shillingv6289 Hey, you have to install the node.js first and after that install git as well. Once you install the node.js then you will be able to use the npm and git commands from your terminal.
@@CodeBucks Thank you very much I installed the node js and now can follow your project
sir it's humble request please will you please explain while coding it will be helpful for newbie like me , thanks a ton for such great content , please consider my suggestion ♥️
Sure. I'll try my best to add voice over on next videos 😄
Thank you so much
You're most welcome
For some reason it doesn't work when there are two elements with horizontal scrolling on the page. I inserted two identical components, the second one does not work.
Make sure to add another scrolltrigger for different component. Keep markers:true in both of the components in scroll-trigger settings and observe their behaviour.
Can u pls upload a hotel booking website tutorial with review rating system?.
Sure I will make one tutorial for it.😄
Hi, I want final for this project
Hey, here is the final code: codebucks.gumroad.com/l/adbfp
How can we deploy the project on netlify?
Hey, you can push your code into github then connect it with the netlify. I have created tutorial on how you can host React apps on netlify you can see it from here: ruclips.net/video/OG71ARNRPT4/видео.html
Can you add audio explaining things plz🙏
Hey, I will try my best for future videos. Voice over takes much time that's why I haven't added for this video.
Make fully featured erp with react and I'll be ur life time follower
Sure I will try to make one. Do you have any idea in mind?
@@CodeBucks you can make a simple crud erp with firebase as backend. But with ur unique taste to it
Getting this error after coverVideo component is mounted - TypeError: Cannot set property closed of # which has only a getter
Can you share your code? Or check on which line the error is happening?
i do have a same problem can you help me plzzzz@@CodeBucks
Horizontal scroll in shop component is not working. Please help.!
Have you checked by using markers: true? Also make sure to check the start and end value for the shop component that you are using for the scroll. Match your code with the final code.
@@CodeBucks hey thanks for replying. I solved the issue by using id in main class rather than className and by setting end: `bottom ${pinWrapWidth}`.
Great Tutorial btw.!
@@CodeBucks But my animation is way too fast once my tigger hits within 1 sec entire section moves towards left and reaches. can u please help here ?
@@rajatluthra9737 hey, that's great.
@@rajatluthra9737 Can you point out the component or the code that you are refering?
from where I can learn frame-motion
You should try Framer-motion Tutorials by The net Ninja.
my scroller cannot work in shop section plz help
30:22 🎉 1:25:42. 1:33:32 2:10:57
so you're telling me I'm not good if i just know html css & vanilla JavaScript 🙂
No way, You can still build the same website in HTML, CSS and Javascript. You just have to write more code.😉
@@CodeBucks okay , BUT THAT SCROLLING EFFECT , YOU MOVE THINGS EVERY LITTLE TIME YOU SCROLL , THAT'S HARD🥲
@@developer_hadi Yeah it's hard if you don't use any library. But you can still use locomotive-scroll in plain js as well.
@@CodeBucks is it hard to learn JavaScript libraries? like learning a new language? or it's easier? by the way can i take your number or Instagram or anything else, I want to consult you in something.
@@developer_hadi No it's not that hard to learn library or framework if you have knowledge of basics of Javascript and you have already build few apps using it.
You can dm me on twitter or insta.
Link is in the description.
Have you been away for a long time?)
Hey, Yes i'm busy with some project.
@@CodeBucks Understood! We wait! Thanks!)
my screen just got blank when horizontal scroll started and then banner section with quotes overlaps the shop section :( does anyone have any idea what could be doing wrong?
Hey, Can you show your GSAP code of the Shop section?
@@CodeBucks I am using tailwind css for styling. not sure if it is correct way of showing code or not 😅
import { motion } from 'framer-motion';
import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';
import { useLayoutEffect, useRef } from 'react';
import img1 from '../assets/images/img1.webp';
import img2 from '../assets/images/img2.webp';
import img3 from '../assets/images/img3.webp';
import img4 from '../assets/images/img4.webp';
import img5 from '../assets/images/img5.webp';
import img6 from '../assets/images/img6.webp';
import img7 from '../assets/images/img7.webp';
const Shop = () => {
gsap.registerPlugin(ScrollTrigger);
const ref = useRef(null);
const horizontalRef = useRef(null)
useLayoutEffect(() => {
let element = ref.current;
let scrollingElement = horizontalRef.current;
let pinWrapWidth = scrollingElement.offsetWidth;
let t1 = gsap.timeline();
setTimeout(() => {
t1.to(element, {
scrollTrigger: {
trigger: element,
start: "top top",
end: `${pinWrapWidth} bottom`,
scroller: "#App", //locomotive-scroll
scrub: true,
pin: true,
// markers: true,
// anticipatePin: 1,
},
height: `${scrollingElement.scrollWidth}px`,
ease: "none",
});
t1.to(scrollingElement, {
scrollTrigger: {
trigger: scrollingElement,
start: "top top",
end: `${pinWrapWidth} bottom`,
scroller: "#App", //locomotive-scroll
scrub: true,
// markers: true,
},
x: -pinWrapWidth,
ease: "none",
});
ScrollTrigger.refresh();
}, 1000);
ScrollTrigger.refresh();
return () => {
t1.kill();
// ScrollTrigger.kill();
};
}, []);
const Product = ({img, title = ''})=>{
return(
{title}
)
}
return (
New Collection
{/* left side */}
The brand new collection is currently being developed in USA.
We create our products using best quality material, including the use of some of the pure fabrics to make our products.
All products are made using the best materials, from the finest cotton to the finest fabrics.
We have lots of different clothing options like shoes, jackets and dresses.
Not only clothes but we also provide unique Jewellery as well.
It is great for us to carry our new clothes all around the country and look different.
{/* right side */}
)
}
export default Shop
@@nidafatimaiscooking In scroller you are keeping the "#App". Make sure that you have App as id in the main element of the App.js file. If you have App as className then write ".App" and not "#App". Check this out and let me know if you still have this error.
@@CodeBucks yes it is id="App" on the main element, I think issue is with pin property. Whenever I enable pin= true this issue happens. Don't know why. And if I disable it horizontal and vertical scroll happen simultaneously.
How to fix error in child compilation
Can you send the error message?
-----------------------------------------------------------------------------------------------------------
Starter CODE:
github.com/codebucks27/wibe-studio-starter-files
Final CODE:
Get Website from below Link 👇
➡ Link 💚: github.com/codebucks27/wibe-studio (Give ⭐ to this repo if you like it)
🔰[Click Above Link to get the final code]🔰
-----------------------------------------------------------------------------------------------------------
lmao noob