Congratulations ED on your engagement You inspired me a lot, watching your tutorials has taught me a lot made me go from zero to hero Thanks once again 👍
Hey Ed, im from Brazil and i'm developer here. I implemented this feature in my project and stayed very nice. Thank you so much bro. !!!!!!! You save me !!!! Very clean code. I will try implemented button for next and prev carousel. :D
This is great! But breaks down on resize. For those, like me, who wanted it to be responsive. Here's a somewhat hacky solution: - Use an id instead of ref to always have the current widths - Use a key to force a rerender of the outer container (the hacky bit) // outer container using a key // set the left constraint const handleLeftConstraint = useCallback(() => { const el = document.getElementById(id); if (el) { setLeftConstraint(el.scrollWidth - el.offsetWidth); } }, [id]); // set key and left constraint on resize useEffect(() => { const handleResize = () => { setContainerKey((prev) => prev + 1); handleLeftConstraint(); }; window.addEventListener("resize", handleResize); return () => { window.removeEventListener("resize", handleResize); }; }, [handleLeftConstraint]);
You can set dragConstraints to be a useRef containing the parent element instead. It will automatically measure it and use that for the constraints. Great vid and congrats!
Awesome tutorial, also love your style of teaching. How would you make this work after resizing the window? I tried to hook it up to a resize eventListener, but it only works correctly when I'm all the way at the begining while resizing. If i'm scrolled all the way over to the right, width comes out as 0. Any idea how to implement this correctly?
Here is my version. I think is shorter, simpler and responsive. I couldn't do it without watching this video and that comment: "You can set dragConstraints to be a useRef containing the parent element instead. It will automatically measure it and use that for the constraints. Great vid and congrats!". Thank everyone involved in the React online community. Here are my 2 cents: import React, { useRef } from 'react' import {motion} from 'framer-motion' export const Box = () => { const boxRef = useRef(null) return (
It worked. Thanks! To whoever is following the video's code, besides removing state, useEffect and adding the carousel ref to the dragConstraints property, you just need to apply "display: flex" to the carousel element (the one with className carousel). I've tried solving this using a window resize event inside that useEffect. The "width" state changes as expected, but it seems dragConstraints just bugs. It doesn't use the new values and actually recalculates even the "right: 0" to some bullshit. I don't know why that happens.
Congrats Ed, wish you happiness and full house with children ;) Project idea: build a wedding organization website ;) - with all thing that have to be prepared before wedding - guests - table guests - wedding day schedule and so on... ;) Little fun project right :)
@@idan5930 In the App.js component change the useEffect hook to this: useEffect(() => { setWidth(carousel.current.scrollWidth - carousel.current.offsetWidth); }, [innerWidth, innerHeight]); That fixed it for me.
How can I deal with resize? When I resize, maximize or minimize the browser, it loses dragConstraint. I read all the comments but it didn't work as expected. Please help me.
Thanks a lot for this tutorial ! I've a question : Is there a way to update dragConstraints values ? Because I'm trying to make it responsive if user on mobile decide to turn the screen. // I've tried to update with a resize event listener as below useEffect(() => { setWidth(ref.current.scrollWidth - ref.current.offsetWidth); const handleResize = () => { console.log(ref.current.scrollWidth - ref.current.offsetWidth); setWidth(ref.current.scrollWidth - ref.current.offsetWidth); }; window.addEventListener("resize", handleResize); return () => { window.removeEventListener("resize, handleResize"); }; }, []); // Console return correct value of width. Thank your for your answer !
Genuine question for those that watched the whole video (I haven't).. Why is framer being used here and why would it take 6 hours? Based on the beginning and end demo, it seems like this can be accomplished with a scrollable container and some styling, right? What am I missing? Is this just an exercise to accomplish a carousel specifically using framer drag?
I have problem, my images load during I scroll, I cant load them all at the beginning... I tried to wait while images will load (check parameter -> img.complete), also create hook for this case, but it doesnt work. I tried to use Promise.all in useEffect to wait for loading. I tried to use onLoad for each img and it also didnt help me. And one more question: When you try to change width or height of your screen (for example in responsive design mode -> ctrl+shift+m), carousel.current.scrollWidth and carousel.current.offsetWidth do not refresh and do not recalculate new width for dragConstraints (left). I tried to use createRef instead useRef because createRef will always create a new ref but it didnt help... I tried add some dependencies inside useEffect which recalculate width for dragConstraints, create new useEffect near existed which reset carousel ref but it doesnt help... Can you please create new video with help?
Congratulations ED on your engagement
You inspired me a lot, watching your tutorials has taught me a lot made me go from zero to hero Thanks once again 👍
Congrats on your engagement !
this is exactly what is going to make for my next project, this certainly saved a some of my time.🎉
Actually not some some just a lot coz logics to present our ideas a sometimes costs much time
Hey Ed, im from Brazil and i'm developer here. I implemented this feature in my project and stayed very nice. Thank you so much bro. !!!!!!! You save me !!!! Very clean code. I will try implemented button for next and prev carousel. :D
Conseguiu alterar quando a pessoa da um resize na tela? Aqui quebra se tiver no desktop e ir pro mobile sem fazer um reload
Congratulations Ed.
A great programmer and a responsible man.
Perfect combo! 🔥
This is great! But breaks down on resize. For those, like me, who wanted it to be responsive. Here's a somewhat hacky solution:
- Use an id instead of ref to always have the current widths
- Use a key to force a rerender of the outer container (the hacky bit)
// outer container using a key
// set the left constraint
const handleLeftConstraint = useCallback(() => {
const el = document.getElementById(id);
if (el) {
setLeftConstraint(el.scrollWidth - el.offsetWidth);
}
}, [id]);
// set key and left constraint on resize
useEffect(() => {
const handleResize = () => {
setContainerKey((prev) => prev + 1);
handleLeftConstraint();
};
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
};
}, [handleLeftConstraint]);
Thanks, it worked for me
Congratz @Dev Ed!!! Best wishes for both!!
Ooo, is this a fellow Maiar & Elrond enjoyer?
Congrats on the engagement!
Congratulations on the engagement, you owe your RUclips community a wedding invitations
You tutorials on basics of html, css,js, node, react, animations have helped me a lot. Thanks for being so awesome 😊
are you from lpu??
Congratulations Guys!! 🎉❤️
It Feels so great 💐
You can set dragConstraints to be a useRef containing the parent element instead. It will automatically measure it and use that for the constraints. Great vid and congrats!
Me neither. Can you please try to explain more about this solution?
is there a way we can click on the image?
@@sitoshinako4553 I'm struggling with this at the moment. have you found a solution?
This was quick and fancy, your personality is fire! Congrats, hope all is well!
Congratulations on the engagement!! 🤗🥳
Congratulations to you ! You inspire me a lot on all the front-end part tips and tricks ! Best of luck for you future !
Congrats on the engagement!
Congratulations Ed!!!! So happy for you
Congratulations Ed on your engagement you are a very crazy developer
If u would do an ultimate react animation course with framer motion that would super
Yes you right, I can't find a good framer motion course
Congratulations on your engagement DEV ED.
Congratulations Mr and Mrs future Ed. Hope you both have an amazing life together 🎉🎉🎉
Awesome tutorial, also love your style of teaching. How would you make this work after resizing the window? I tried to hook it up to a resize eventListener, but it only works correctly when I'm all the way at the begining while resizing. If i'm scrolled all the way over to the right, width comes out as 0. Any idea how to implement this correctly?
Also, this only works if I have a padding on the items, without it width also equals 0.
Here is my version. I think is shorter, simpler and responsive. I couldn't do it without watching this video and that comment: "You can set dragConstraints to be a useRef containing the parent element instead. It will automatically measure it and use that for the constraints. Great vid and congrats!". Thank everyone involved in the React online community. Here are my 2 cents:
import React, { useRef } from 'react'
import {motion} from 'framer-motion'
export const Box = () => {
const boxRef = useRef(null)
return (
{
Array.from({length: 20}).map((_, i) => (
))
}
)
}
It worked. Thanks! To whoever is following the video's code, besides removing state, useEffect and adding the carousel ref to the dragConstraints property, you just need to apply "display: flex" to the carousel element (the one with className carousel).
I've tried solving this using a window resize event inside that useEffect. The "width" state changes as expected, but it seems dragConstraints just bugs. It doesn't use the new values and actually recalculates even the "right: 0" to some bullshit. I don't know why that happens.
Thankyou, it worked for me. Anyone using display flex on "inner-coursel" and having issue try to change it to display "inline-flex"
Thank you so much, it worked. I've been following the comments and getting the answers for responsiveness in bits but this is it!@@herdina7
Congrats Guys!!! Stay Together Forever. God Bless You.
congrats on your engagement guys ❤️
Congrats on the engagement, Ed!
Congratulations Ed on your engagement you are the best
Congratulation on the engagement 💍
Nice tutorial as always
That's really sweet. Congrats on your engagement!!!
congrats man I have been watching you since 2+ years from pakistan
congrats on the engagement Ed
Congratulations!!!!!
Oh congratulations man!! ألف مبروك صديقي
Congratulations guys best wishes for you! And yesterday is my birthday, wish me happy birthday Ed.. i'm waiting.
Many many congratulations both of you for you future ...And thank you so much for providing such informative contents.
Congratulations on the engagement bro! 🌞
congraulation. now bless us with little ed and his development skills :)
Congrats Ed.
I really happy for you.
HAPPY FOR YOU CONGRATS!!!!!
wow, congratulations Ed !
Congratulations on your engagement brother
I have never been soo early!✨ Also Congratulations and best wishes 🎉✨
Congratulations guys 🎉 Best Wishes ❤️
Congrats Eddy! Best wishes for you both
Congrats Ed🎉
Congrats, I'm really happy for you!!!
WE love you dev ed give us more of these cool animations on react and CONGRATS MA DAWG!!!!!
Congratulations ed!
this particular video changed my perception of a whole lot of stuff!!!!!
Congrats Ed :) wish you two all the best
congratulations to you and you're beloved! and thanks for such great contents, wish you a great day Ed!
Omg! Congratulations you guys 😍🎉
eventually it all snapped into place and I started learning how to add all the effects, titles, motion text. It was pretty cool to see my
Awesome! Thanks so much for this video. And congratulations to both of you 😊
Congrats Ed :))
Congratulations on getting engaged..❤️
Now looking forward to Future Mrs. Dev teaching us web development 😌
Congrats man ! 🎉
I am so happy for u guys
Lol congratulations 🎊 yall sound perfect together already 😁
Congrats mate!!
I love your way of teaching things. Congratulations.
so helpful and easy impl slider with framer motion, thank u for your tutorial
Congrats ED on your engagment!!
OMG I'M SO HAPPY FOR YOU GUYS KEEP THE GRIND UP BRO AND CONGRATULATIONS 🎊🎊🎊
The useRef() doesn't work when the data loads in and the container changes in size to accommodate the new data. What can I do?
useEffect(() => {
dispatch(getMiniGame()).then(() => {
setWidth(carousel.current.scrollWidth - carousel.current.offsetWidth);
});
}, []);
@@taitran7822 Wtf? What is dispatch and miniGame?
Haha congrats you big ol nerd! Learned quite a bit from you over the year. 👏🙌
Congratulations on your engagement
congrats bro🎂💐
Congratulations on the engagement! all the best for the two of you.
Congratulations on the engagement !
Congrats Ed, wish you happiness and full house with children ;)
Project idea: build a wedding organization website ;)
- with all thing that have to be prepared before wedding
- guests
- table guests
- wedding day schedule
and so on... ;)
Little fun project right :)
#Congratulations and best wishes both of you guys💖
Only the inner-carousel is draggable for me... anyone else fix this bug?
No, ran into the same issue were you able to figure it out?
@@Test-ql2ch yeah lmk if you still need help
Awesome! but there is a problem when you resize the page and drag, the dragConstraints disappear...
Exactly. Have you found a solution for this issue yet?
same here. did you find the solution to this?
@@idan5930 In the App.js component change the useEffect hook to this:
useEffect(() => {
setWidth(carousel.current.scrollWidth - carousel.current.offsetWidth);
}, [innerWidth, innerHeight]);
That fixed it for me.
congrats bro hope u stay forever toghter :)
Congraats Ed and futur Ms. Ed 🥳
Congratulations Ed. Way to go. ❤❤
How can I deal with resize? When I resize, maximize or minimize the browser, it loses dragConstraint. I read all the comments but it didn't work as expected. Please help me.
Congratulations guys 🎉
Congrats! 🎉
Happy engagement Ed, so happy for you. Also as usual great content.
congratulations Ed !!
çok güzel. tam da aradığım şeyi buldum. harikasın dostum. Türkiye den selamlar
Congratulations Ed ❤❤
Congratulations my man🙇♂️🎉❤💯🥂
Congrats man. Love your content.
Congratulations to both of you 🤗
Congrats! Also, the dog wants royalties.
I WANNA SEE IT IN SVELTE ! MORE SVEVLTEKITTTT also gz on engagement!
Congratulations Ed!
Thanks a lot for this tutorial !
I've a question : Is there a way to update dragConstraints values ?
Because I'm trying to make it responsive if user on mobile decide to turn the screen.
// I've tried to update with a resize event listener as below
useEffect(() => {
setWidth(ref.current.scrollWidth - ref.current.offsetWidth);
const handleResize = () => {
console.log(ref.current.scrollWidth - ref.current.offsetWidth);
setWidth(ref.current.scrollWidth - ref.current.offsetWidth);
};
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize, handleResize");
};
}, []);
//
Console return correct value of width.
Thank your for your answer !
Congratulations man! You're a treasure Ed!
Genuine question for those that watched the whole video (I haven't).. Why is framer being used here and why would it take 6 hours?
Based on the beginning and end demo, it seems like this can be accomplished with a scrollable container and some styling, right? What am I missing?
Is this just an exercise to accomplish a carousel specifically using framer drag?
CONGRATULATIONS!!!
Congratulations!
Tabriklayman Ed. 100tadan ortiq farzandli bo'linglar. Umid qilamanki buni tarjima qilasan.
Congratulations ED 👍
I have problem, my images load during I scroll, I cant load them all at the beginning...
I tried to wait while images will load (check parameter -> img.complete), also create hook for this case, but it doesnt work.
I tried to use Promise.all in useEffect to wait for loading.
I tried to use onLoad for each img and it also didnt help me.
And one more question:
When you try to change width or height of your screen (for example in responsive design mode -> ctrl+shift+m), carousel.current.scrollWidth and carousel.current.offsetWidth do not refresh and do not recalculate new width for dragConstraints (left).
I tried to use createRef instead useRef because createRef will always create a new ref but it didnt help...
I tried add some dependencies inside useEffect which recalculate width for dragConstraints, create new useEffect near existed which reset carousel ref but it doesnt help...
Can you please create new video with help?
Congratulations on your engagement! 🎉🌹🎉
Man you really save my life on this, thanks a lot x)
Congratulations Ed.👍🙏