This Magnetic Nav Link Animation Is Sick!! | Nextjs 14, Framer Motion Tutorial

Рет қаралды 22,898

Күн бұрын

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

Пікірлер: 28

@developedbyed 4 ай бұрын

Like for more animation effects 👍

@isgjayden 4 ай бұрын

Ed I love you videos and projects!!! ❤❤❤ I need emotional support tho 😢😮

@BrutalInsights 3 ай бұрын

Great idea to continue amazing animation effects tutorials , like the subscribe button on youtube is so beautiful right :)

@mgriffes 3 ай бұрын

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!"

@lalasmith2137 4 ай бұрын

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

@user-fz8ti1rc6j 4 ай бұрын

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.

@ananunes1792 4 ай бұрын

Omg, you definely need to create a series!! It would be awesome, thank you for work 💖

4 ай бұрын

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.

@rand0mtv660 4 ай бұрын

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.

@Logicmontana 4 ай бұрын

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.

@deliriumcode Ай бұрын

You've got yourself a new subscriber. Thank you for videos like this!

@jay22o 4 ай бұрын

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 👌👍😀

@deepanshusharma9311 4 ай бұрын

Sir you are the best coding teacher I have ever seen

@giannisnik5295 4 ай бұрын

Excellent work!!Thank You!

@developedbyed 4 ай бұрын

Many thanks!

4 ай бұрын

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.