Hey there, my awesome brothers and sisters! I've given the channel a little shake-up. Back in July 2023, I decided to quit my programming job. If you're curious about what led to this change, check out this video: th-cam.com/video/QTUiDhttX18/w-d-xo.htmlsi=gJQ-7b5Ryyyp6tdb. With that said, I'm currently creating more 'self-development/improvement' kind of content. If your interest has been sparked, you can find it right here: www.youtube.com/@DEVAMS01/videos. If not keep enjoying the tutorial :D. Cheers, Björn
DIt was het laatste onderdeel wat ik heb bekeken. Helle toffe series. Heb ervan genoten en dit heeft echt bijgedragen aan mijn algemene begrip na het volgen van uitgebreide React tutorials. Denk dat ik hierna wel een echte poging aandurf voor een uitgebreide functionele portfolio. Hartstikke bedankt!
Good video but what about when i have slightly different starting position or delay for each element ? What you did assumes all cards will have the same animation
hey nice walk through. by the way the animation works only when targeted to one div or something. can you explain how it can be extended to another div
Haha smooth intro, mate. Another nice video. You could consider adding the animation to the child elements instead of the parent, so that the element fly in one-by-one when scrolling down the page.
i think it has to do with the fact that those divs may not trigger animations properly , when zoomed in or the div has a lot of empty space or something.. react gods must have thought of that
Thanks for the Tutorial, really well done and helpful. Altough i have some trouble monitoring a secon ref, since react only allows the name ref for as a name for the reference. Does anyone have a solution to that problem ?
hey , im having some poblem with framer motion , the website goes laggy or frames drops!! is there a way to handle the frame drops ? i get this message on the client side console saying , animation took 137ms to complete and its looks so choppy can you explain why this is happening. ?
i have saved your video (no offence) i have liked the video , i have subscribed the channel and i have shared it to my many other developer friends and as a bonus i am subscribing from 4 other devices !! ---- > `${ also i love the entry }`
To also fix the issue on 13:43 you can set the margin in the viewport to prevent the animation from happening right away viewport={{ once: true, margin: "-240px" }}
Hi, Thank you for super clear explanation. One question I have is how did you write your Routes so they all render continuously in one page? Whenever I try to define a Route for each component, only that component renders on the screen (changes via link ending). Can I take a look at the component that has the Routes in it?
Use InView Component from react-intersection-observer and wrap motion.div with {({ref,inView})=>(.........)}. Now you can you use it for any container.. Just wrap with InView Component and give ref
within your component, for example: const myvariants = { hidden: {..enter parameters here..}, show: {..enter parameters here..} } the ternary operation in animate={ } basically just sets the variant to show if inView is true, and hidden if inView is false. You should check out the framer motion discord if you need any more help though!
You could just create a custom hook that implements the same logic. /** * useCustomAnimation.js File */ // React import { useEffect } from "react"; // Animation & Motions import { useAnimation } from "framer-motion"; import { useInView } from "react-intersection-observer"; /** * This is a custom hook to toggle a Framer Motion animation * when an element is in view or out of view * * @param {object} start - the framer motion animation object when IN view * @param {object} end - the framer motion animation object when OUT of view * @param {number} threshold - the threshold for when IN view * @returns {object} an object with the ref and the animation */ const useCustomAnimation = (start, end, threshold = 0.25) => { const animation = useAnimation(); const { ref, inView } = useInView({ threshold }); /** * This effect toggles when the animation is * in view. When in view, the start variable * is animated and when out of view the end * variable is used to animate. */ useEffect(() => { if (inView) animation.start(start); else animation.start(end); }, [inView, animation, start, end]); return { ref, animation }; }; export default useCustomAnimation; /** *Your React Component File */ // Import your motion & custom hook import { motion } from "framer-motion"; import useCustomAnimation from "../../../../../hooks/useCustomAnimation"; // Define your animation params const start = { x: 0, transition: { type: "spring", duration: 1, bounce: 0.3, }, }; const end = { x: "-100vw" }; // Call the hooks const divOneAnimation = useCustomAnimation(start, end, ); const divTwoAnimation = useCustomAnimation(start, end, ); {} {} Hope this helps..
Thank you so much for your videos, you really saved my projects and i learned so much! Could You please make a video of how to make the navbar that you created into a hamburger bar.
Hey there, my awesome brothers and sisters!
I've given the channel a little shake-up. Back in July 2023, I decided to quit my programming job.
If you're curious about what led to this change, check out this video: th-cam.com/video/QTUiDhttX18/w-d-xo.htmlsi=gJQ-7b5Ryyyp6tdb.
With that said, I'm currently creating more 'self-development/improvement' kind of content. If your interest has been sparked, you can find it right here: www.youtube.com/@DEVAMS01/videos.
If not keep enjoying the tutorial :D.
Cheers, Björn
BRO this took me days to learn and you explained it in 15 min 🙇🏻♂
I've read and watched several articles/videos on this topic and so far the conclusion is that your way of explaining it is so "graspy". Great job!
i just watched this video in 2023 and i inferred that you're the king of animations ❤❤
Duuude u so good on explaning!!! Also u seem so happy after using react magic haha! Ty for tutorial!
now you don't need to intstall thrid party hooks you can use whileInView like this :
Literally THE best intro ever, had me in stitches 🤣. Cheers for the excellent tutorial mate, helped a lot.
hahaha thanks mate!!
+++
man I like this guy😂 from the moment he slid in with his chair, i knew this was gonna be fun. Thanks for the video
Haha thanks man!! 😂😀
still relevant in 2023. You're the bomb!
haha thank you!
You are clearer than the official docs 😊. Implemented and works, thanks alot!
haha thanks mate! Good to hear!
bro u made my day, i have been searching for it and AI give this video. im going to try now
haha good to hear bro! 👊
amzazing tutorial. thank you so much....I'm watching you from Africa
Bonjour DEVAMS, merci beaucoup pour cette belle vidéo!
haha thanks man!! 😁
You are so talented man. Your videos help so much
Thanks man!! Im very happy that they are helping 😄. And really appreciate your kind words!
OMG, you are fantastic, and totally saved my bacon! Thanks for the video!
holy shit.. this guy is a legend
Great explanation brother👍❤️
Thank you! I was looking exactly for this!
Best tutorial about Framer-motion. I'm stuck in my project trying to use Framer-motion, this helps a lot. Thank you very much! 🙏🙏🎉🎉😁😁
This was an awesome video! You deserve more subs
DIt was het laatste onderdeel wat ik heb bekeken. Helle toffe series. Heb ervan genoten en dit heeft echt bijgedragen aan mijn algemene begrip na het volgen van uitgebreide React tutorials. Denk dat ik hierna wel een echte poging aandurf voor een uitgebreide functionele portfolio. Hartstikke bedankt!
Thanks for this tutorials, I'm learning a lot with your explanations
Thank you!!
Helped a lot! Very easy to understand and apply, Thanks! 👍👌
Thanks man, very nice to hear! Keep going!🦾
Great explanation. Exactly what I needed. Thank you so much. :)
Thanks bro, your explanation was clear
Good to hear bro!🦾
Best Explanation I've come across so far. . Thanks so much for this! looking forward to more tutorials. subscribed
Good job brother!
Great explanation bro. Thank you for teaching us new developers. Really appreciated
This video is so useful to me ! thanks DEVAMS :)
Thank you so much . Really Apreciated !
insanely helpful added this to my project!!
Ahhh I found this so helpful, thank you.
your video helped me a lot! thank you so much!
Nice man! 🦾
Good video but what about when i have slightly different starting position or delay for each element ? What you did assumes all cards will have the same animation
Glad that you made this possible for us
hey nice walk through. by the way the animation works only when targeted to one div or something.
can you explain how it can be extended to another div
Great video bro , thankyou so much
Great video
Excellent, thanks
You saved my day 🤜🤛
Haha nice to hear man! 😁
loved your video man
This is an awesome framer motion tutorial !!! 🤩🤩🤩
Thank you so much!! I'm glad you enjoyed it! 😁
Great video lad.
Loved the video :)
Great video, man!
Hey we can directly add conditional operator && or ?: in the varients like opacity: isView ? 1 : 0, scale: isView ? 1 : 0,
Thank you so much brother, you are the best 🌟🌟
Thanks bro! 😁
This is amazing. Thank you so much
Awesome explanation, thank you!!
I love your explanation, great video! c:
exactly what i wanted THANKS!!!!
Thank you so much for this great tutorial ❤️
Thanks man!!
Good job
Thanks! Great info here ✌️
Thank you! 👊
Very nice video man, just wondering you can put the ref in the motion.div right? That'll make it more sync?
amazing video
Thanks!!
wonderful tutorials
Thanks man, helps alot
Very good and funny too!
Thanks man!
Nice job, man! Thank you!
Thanks a lot , this was very helpful
very helpful video, thanks
Thank you!
Haha smooth intro, mate. Another nice video. You could consider adding the animation to the child elements instead of the parent, so that the element fly in one-by-one when scrolling down the page.
Glad you liked the intro bro haha. Good suggestion about the animation! I'll have a look into that!
how please
Great tutorial thanks
Thank you!
awesome video!!! subscribed for sure!
wonderful thank you
Thank you🙏
How would i use `ref={ref}` with multiple elements on the same page?
Thank you so much
sir can you tell whats the difference between path spacing , path offset
in framer motion what the exact use of it in svg animation
Thanks man, you helped a lot
Great video, but quick question. Why mess around with the threshold and not just apply the ref directly to the div containing the movies?
i think it has to do with the fact that those divs may not trigger animations properly , when zoomed in or the div has a lot of empty space or something.. react gods must have thought of that
Thanks for the Tutorial, really well done and helpful.
Altough i have some trouble monitoring a secon ref, since react only allows the name ref for as a name for the reference.
Does anyone have a solution to that problem ?
great tut
Awesome, thank you!
Idk if it's been added recently but, there's a useInView hook that's built-in to Framer Motion. Great tutorial though!
I think whileInView fixes this problem.
@@thejustprojects oh that's cool, I'll give it a try 👍
i am getting this eror :( - TypeError: Cannot read properties of undefined (reading 'current')
hey , im having some poblem with framer motion , the website goes laggy or frames drops!! is there a way to handle the frame drops ? i get this message on the client side console saying , animation took 137ms to complete and its looks so choppy can you explain why this is happening. ?
how to animate scrolling up ?
i have saved your video (no offence) i have liked the video , i have subscribed the channel and i have shared it to my many other developer friends and as a bonus i am subscribing from 4 other devices !! ---- > `${ also i love the entry }`
Thank you for the video. How do you organise your code when there are many animations on the page? Do you initialise many useAnimation() ?
You just build a custom hook to reuse the logic every time you need it
thanks alot man!
As usual great tutorial. How animate only for the first time while scrolling down. Please help.
whileInview insted of all of that steps see framer motion doc and tell me your opinion please ?
To also fix the issue on 13:43 you can set the margin in the viewport to prevent the animation from happening right away
viewport={{
once: true,
margin: "-240px"
}}
thanks soooooooooo mush you make it easy
Great video! Thank you so much :)
If some1 ask for Framer Motion's documentation, i ll show u. Much obliged !
I was looking for this yesterday lmao, but found the intersection library
Hi, Thank you for super clear explanation. One question I have is how did you write your Routes so they all render continuously in one page? Whenever I try to define a Route for each component, only that component renders on the screen (changes via link ending). Can I take a look at the component that has the Routes in it?
He didnt use react-router. Just anchor elements combined with html id. You can see that in his navlinks components
this only worked for me when x was set to -95vw instead of -100vw, please help
incredible explanation, what if I want to observe multiple div ?
Use InView Component from react-intersection-observer and wrap motion.div with {({ref,inView})=>(.........)}. Now you can you use it for any container.. Just wrap with InView Component and give ref
thanks a ton!
would have been nice to do it for each item
This works great on only one div. How can you do this with different divs and with different animations?
within your component, for example:
const myvariants = {
hidden: {..enter parameters here..},
show: {..enter parameters here..}
}
the ternary operation in animate={ } basically just sets the variant to show if inView is true, and hidden if inView is false. You should check out the framer motion discord if you need any more help though!
You could just create a custom hook that implements the same logic.
/**
* useCustomAnimation.js File
*/
// React
import { useEffect } from "react";
// Animation & Motions
import { useAnimation } from "framer-motion";
import { useInView } from "react-intersection-observer";
/**
* This is a custom hook to toggle a Framer Motion animation
* when an element is in view or out of view
*
* @param {object} start - the framer motion animation object when IN view
* @param {object} end - the framer motion animation object when OUT of view
* @param {number} threshold - the threshold for when IN view
* @returns {object} an object with the ref and the animation
*/
const useCustomAnimation = (start, end, threshold = 0.25) => {
const animation = useAnimation();
const { ref, inView } = useInView({ threshold });
/**
* This effect toggles when the animation is
* in view. When in view, the start variable
* is animated and when out of view the end
* variable is used to animate.
*/
useEffect(() => {
if (inView) animation.start(start);
else animation.start(end);
}, [inView, animation, start, end]);
return { ref, animation };
};
export default useCustomAnimation;
/**
*Your React Component File
*/
// Import your motion & custom hook
import { motion } from "framer-motion";
import useCustomAnimation from "../../../../../hooks/useCustomAnimation";
// Define your animation params
const start = {
x: 0,
transition: {
type: "spring",
duration: 1,
bounce: 0.3,
},
};
const end = { x: "-100vw" };
// Call the hooks
const divOneAnimation = useCustomAnimation(start, end, );
const divTwoAnimation = useCustomAnimation(start, end, );
{}
{}
Hope this helps..
why couldn't you just add the ref attribute to a diffrent div/tag
Why not just use 'whileInView' and 'viewport' props available in framer-motion itself!
Yeah this is what i thought as well 🧐
Just used this and modified to use the framer motion useInView hook, and it merged seamlessly. Great video!
I did this its working but framer motion implemented new method : whileInView="visible" just add as attribute guys
Thank you so much for your videos, you really saved my projects and i learned so much! Could You please make a video of how to make the navbar that you created into a hamburger bar.
Thank you very much! I'll try to record that video upcoming weekend!
th-cam.com/video/Et5tDPoU03c/w-d-xo.html