Thanks for this! And, hell yeah, a series on animation effects in nextjs / framer-motion / tailwindcss would be awesome. I say, "Go for it, my good man!"
00:02 Create magnetic navigation links that attract to the cursor 02:13 Setting up multiple navigation links with animations 04:16 Install Framer Motion and implement motion effects on links. 06:38 Using Framer Motion to animate custom elements 08:47 Brilliant offers visual and interactive lessons for learning on the go. 10:59 Setting up separate animations for individual links in Nextjs 14 using Framer Motion. 13:09 Configuring input and output bounds for the animation 15:29 Implementing pointer events for smooth animation 17:30 Creating dynamic motion effects for active links. 19:32 Applying Z-index and position relative for motion effect 21:46 Creating cool effects in Next.js Crafted by logic montana.
amazing animation, love all the small things you suggested and then continued to show us how you can do it. definitely would love more next js cool animations from you. i learn so much and having fun in the process. Thank you
8 หลายเดือนก่อน +5
A quick note as well, since you are using hooks inside the link map what you are essentially doing is recreating a component for every render. Which is usually fine, if the list is not dynamic, but I'm suspecting that the hooks will be called out of order if the list changes, which could cause weird side effects. You could fix it by moving the map function out of the component, as a separate component, and then just render that component in the map with a key. I could be wrong though, could be something special about the motion hooks that allow them to be called like that.
I think you are not correct in some parts of your comment. As you mentioned, map creates new components and hooks are basically "component scoped". These hooks will not be called out of order because each list item is its own component. Even if list item order changes, the hooks inside the component are still in their order and independent from order in the list. This confusion is why I always avoid using hooks inline like this and in case I need to use hooks in a list of items, I extract that list item into a separate component and then render that for each list item, as you mentioned you would do. That way it's clearer that it's a standalone component with its hooks and not just something that's inline in a loop that just looks weird and potentially wrong. Who knows, I might be wrong but I've seen people use other hooks inline like that without issues, but I always avoid it because it's too confusing.
My god, you wreck my head every time I watch your vids!! I am very new to web design & development and watching you make this vids, makes me think that I have soooo much more to learn! But honestly, thank you for all your content 👌👍😀
8 หลายเดือนก่อน +2
To auto-import after typing the component name - hit CMD/CTRL+period while your cursor is inside the word, and the auto-import suggestion list should pop up again.
Like for more animation effects 👍
Ed I love you videos and projects!!! ❤❤❤ I need emotional support tho 😢😮
Great idea to continue amazing animation effects tutorials , like the subscribe button on youtube is so beautiful right :)
Thanks for this! And, hell yeah, a series on animation effects in nextjs / framer-motion / tailwindcss would be awesome. I say, "Go for it, my good man!"
00:02 Create magnetic navigation links that attract to the cursor
02:13 Setting up multiple navigation links with animations
04:16 Install Framer Motion and implement motion effects on links.
06:38 Using Framer Motion to animate custom elements
08:47 Brilliant offers visual and interactive lessons for learning on the go.
10:59 Setting up separate animations for individual links in Nextjs 14 using Framer Motion.
13:09 Configuring input and output bounds for the animation
15:29 Implementing pointer events for smooth animation
17:30 Creating dynamic motion effects for active links.
19:32 Applying Z-index and position relative for motion effect
21:46 Creating cool effects in Next.js
Crafted by logic montana.
amazing animation, love all the small things you suggested and then continued to show us how you can do it. definitely would love more next js cool animations from you. i learn so much and having fun in the process. Thank you
A quick note as well, since you are using hooks inside the link map what you are essentially doing is recreating a component for every render. Which is usually fine, if the list is not dynamic, but I'm suspecting that the hooks will be called out of order if the list changes, which could cause weird side effects. You could fix it by moving the map function out of the component, as a separate component, and then just render that component in the map with a key. I could be wrong though, could be something special about the motion hooks that allow them to be called like that.
I think you are not correct in some parts of your comment. As you mentioned, map creates new components and hooks are basically "component scoped". These hooks will not be called out of order because each list item is its own component. Even if list item order changes, the hooks inside the component are still in their order and independent from order in the list. This confusion is why I always avoid using hooks inline like this and in case I need to use hooks in a list of items, I extract that list item into a separate component and then render that for each list item, as you mentioned you would do. That way it's clearer that it's a standalone component with its hooks and not just something that's inline in a loop that just looks weird and potentially wrong.
Who knows, I might be wrong but I've seen people use other hooks inline like that without issues, but I always avoid it because it's too confusing.
After enrolling in all of your courses, I've had so much fun. I highly recommend them. Now, I'm eagerly looking forward to the upcoming one.
Omg, you definely need to create a series!! It would be awesome, thank you for work 💖
Sir you are the best coding teacher I have ever seen
My god, you wreck my head every time I watch your vids!!
I am very new to web design & development and watching you make this vids, makes me think that I have soooo much more to learn! But honestly, thank you for all your content 👌👍😀
To auto-import after typing the component name - hit CMD/CTRL+period while your cursor is inside the word, and the auto-import suggestion list should pop up again.
You've got yourself a new subscriber. Thank you for videos like this!
Yes, it would be so useful course
Excellent work!!Thank You!
Many thanks!
it's awsome, just like Dynamic Island.
thx very much for another awesome video @developedbyed For some reason the last part about animating the span element is not working for me
"How to magnetize cucumbers"-course confirmed
Hi souce code link not working help me out
Cool man
🔥🔥🔥
Man... you hair! hahaha
hahaha sorry for jhey xD
What's the matter Ed? Am I not your gorgeous friend on the internet anymore?
where cn file :)) lmao
So cool