This Magnetic Nav Link Animation Is Sick!! | Nextjs 14, Framer Motion Tutorial
Vložit
- čas přidán 1. 06. 2024
- Join Brilliant using the link bellow for 30-day free trial + 20% off the premium subscription brilliant.org/developedbyed/
Check out my web dev courses below🔥
[developedbyed.com](developedbyed.com/)
Resources and code 💻github.com/developedbyed/next...
👨💻Connect with me
Twitter: / developedbyed
Instagram: / developedbyed
Github: github.com/developedbyed/
---
🎶 Dope tracks🔥
C Y G N - Take it Eazy chll.to/a2c63d7c
C Y G N - Sex on the Backseat chll.to/5d8700bb
C Y G N - Sunset Drive chll.to/d66020b5
C Y G N - Emotions chll.to/bfeb2b66
C Y G N - Forever young chll.to/ca5d4c47
C Y G N - Piña Colada chll.to/24dae0be
C Y G N - You chll.to/c89d5030
#react #nextjs #animations - Věda a technologie
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
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.
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.
Omg, you definely need to create a series!! It would be awesome, thank you for work 💖
You've got yourself a new subscriber. Thank you for videos like this!
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.
Sir you are the best coding teacher I have ever seen
Excellent work!!Thank You!
Many thanks!
it's awsome, just like Dynamic Island.
Yes, it would be so useful course
thx very much for another awesome video @developedbyed For some reason the last part about animating the span element is not working for me
Cool man
Is there a vanilla html/css/js version of this?
🔥🔥🔥
"How to magnetize cucumbers"-course confirmed
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