Sam is a gem, as always 💎 Not only do you learn how to make something work, but the gradual addressing of UX and performance considerations during each iteration gives you unshakeable confidence in the code you're writing.
Been using these sort of card spotlight effects for quite a while now. Nice to see a different approach to them. Keep up the neat, high-quality content! 🎉
Crazy thanks for the tip to use groups for the detection- I was initially going to use another motionvalue, but the group idea keeping it in-css is much neater.
Beautiful man. I saw you talking about your course the other day and was like "yeah I'm getting it". Saw the price and changed tune real fast. The thing is, after binge watching your videos, I'm beginning to see that most likely no one is going to be able to give me that same knowledge and experience. Gonna have to get that course very soon! Thanks for the amazing videos!
Sam can you please make a video of how you have your VSCode setup? And what power-user shortcuts and tools you use? It always so satisfying to see you navigate and use VSCode so well
I hope React introduces some primitives to make animations a first class citizen in React. It's funny that in order to get good performance, you essentially have to do things outside of React. I've seen React maintainers mention that they want to make animation primitives for React, but I'm guessing that's still far into the future considering server components are currently the main focus as far as I've seen.
Such a great video and effect. Unfortunately RUclips's compression doesn't do it justice. You should consider publishing your videos in 4k too. Keep up the great work!
Love your videos! Would love to see this example with a smoothed out animation using lerp and Framer Motion! So the gradient “lags” behind the cursor a bit :)
I see you combine some basic CSS transitions and Framer Motion. What do you think of using only one or the other? E.g. only CSS or only Framer Motion. Any pros and cons you could point out?
Hey Sam, nice video and good introduction for Framer-motion! But you can do this easily without any animation library, just use ref instead (as libraries do under the hood). So code will be like this ``` function handleMouseMove(e: MouseEvent) { const { left, top } = e.currentTarget.getBoundingClientRect(); const mouseX = e.clientX - left; const mouseY = e.clientY - top; gradientRef.current?.style.setProperty( "background", `radial-gradient( 650px circle at ${mouseX}px ${mouseY}px, rgba(14, 165, 233, 0.15), transparent 80% ) ` ); } ``` p.s don't forget add ref to gradient div
I prefer having one approach to all techniques like this since (a) it saves energy from having to think about multiple approaches and (b) more importantly, composes with any new functionality I might want to add. For example I made a version of this that used a useMeasure() hook to update the circle width, x, and y positions based on window resizes. Because the Framer Motion version is in the render function all of that new functionality just worked. In your version, you'd have to refactor the imperative `setProperty` call back out into render. In general my rule is to use the declarative version of any API as a first pass since by default it's reactive, and to only dip into imperative APIs when they're necessary.
love this tutorial as i do all your work, was following along but got stuck with useMotionTemplate not fixing the "Rendered more hooks than during the previous render." error. Just curious if you know any reason this hook from framer motion might not have worked correctly in this instance.
thank you! that should just happen once, because here I put the hook directly in the render body, so the first time you save because of hot refresh, you're adding a hook that wasn't there the previous render. you can always move the hook up and set the return value in a variable, and then use that in the JSX, if it's causing you problems (for example due to any conditional rendering in your template).
You and @ThePrimeagen, inspired me give Vim a try, I installed the Intellij's IdeamVim plugin..... ☠ First two were hard... I really struggled... 🔥 But I must admit after 5 days now.... There is no going back !!! 🚀 So thank you so much for the good content and the inspiration 💪
Hey Sam, wondering what you use for the automatic string interpolation at 8:35? Namely just it automatically switch from " to ` after the ${} input? This would save me literal seconds!
What Headwind config do you use? I saw when you wrote `group` in the parent div (14:53), automatically the group change position in class name pd: I love your content!
Pro tip: 👍 Like before watching. It's going to be good!
Sam is a gem, as always 💎
Not only do you learn how to make something work, but the gradual addressing of UX and performance considerations during each iteration gives you unshakeable confidence in the code you're writing.
Been using these sort of card spotlight effects for quite a while now. Nice to see a different approach to them.
Keep up the neat, high-quality content! 🎉
Framer should sponsored you for all hi quality contents on framer motion, love it!
I just love Jamie Lanister teaching me front end
LOL going through the show now for the first time... this is either an insult or compliment depending on if we're talking season 1 jamie or season 3 😂
@@samselikoff Definitely the compliment! Only based on visual resemblance😄
Crazy thanks for the tip to use groups for the detection- I was initially going to use another motionvalue, but the group idea keeping it in-css is much neater.
We don't deserve this tutorial. Thanks Sam. I learned a lot... Again... Please keep it coming! ☺
Beautiful man. I saw you talking about your course the other day and was like "yeah I'm getting it". Saw the price and changed tune real fast. The thing is, after binge watching your videos, I'm beginning to see that most likely no one is going to be able to give me that same knowledge and experience. Gonna have to get that course very soon!
Thanks for the amazing videos!
Sam can you please make a video of how you have your VSCode setup? And what power-user shortcuts and tools you use? It always so satisfying to see you navigate and use VSCode so well
For navigation, I think he uses the Vim plugin.
hey that gradient position option is awesome
absolute god-tier video, hats off sir
Loved it!! ❤
Recreated it in Vanilla and then in React also (no framer)
Would love to see a video on a vanilla version of this Florin. Great video Sam!!
you just keep on posting bangers. Love it!
🔥More framer motion content please!
Incredible vids. Thank you!!
I hope React introduces some primitives to make animations a first class citizen in React. It's funny that in order to get good performance, you essentially have to do things outside of React. I've seen React maintainers mention that they want to make animation primitives for React, but I'm guessing that's still far into the future considering server components are currently the main focus as far as I've seen.
Such a great video and effect. Unfortunately RUclips's compression doesn't do it justice. You should consider publishing your videos in 4k too. Keep up the great work!
Great idea - I was wondering about how to fix that. Will be experimenting on this soon!
Love your videos! Would love to see this example with a smoothed out animation using lerp and Framer Motion! So the gradient “lags” behind the cursor a bit :)
awesome effect
I see you combine some basic CSS transitions and Framer Motion. What do you think of using only one or the other? E.g. only CSS or only Framer Motion. Any pros and cons you could point out?
Great video, Sam! Thumbs up!
Hey Sam, nice video and good introduction for Framer-motion!
But you can do this easily without any animation library, just use ref instead (as libraries do under the hood).
So code will be like this
```
function handleMouseMove(e: MouseEvent) {
const { left, top } = e.currentTarget.getBoundingClientRect();
const mouseX = e.clientX - left;
const mouseY = e.clientY - top;
gradientRef.current?.style.setProperty(
"background",
`radial-gradient(
650px circle at ${mouseX}px ${mouseY}px,
rgba(14, 165, 233, 0.15),
transparent 80%
)
`
);
}
```
p.s don't forget add ref to gradient div
I prefer having one approach to all techniques like this since (a) it saves energy from having to think about multiple approaches and (b) more importantly, composes with any new functionality I might want to add. For example I made a version of this that used a useMeasure() hook to update the circle width, x, and y positions based on window resizes. Because the Framer Motion version is in the render function all of that new functionality just worked. In your version, you'd have to refactor the imperative `setProperty` call back out into render.
In general my rule is to use the declarative version of any API as a first pass since by default it's reactive, and to only dip into imperative APIs when they're necessary.
@@samselikoff nice explanation.
Glorious video
love this tutorial as i do all your work, was following along but got stuck with useMotionTemplate not fixing the "Rendered more hooks than during the previous render." error. Just curious if you know any reason this hook from framer motion might not have worked correctly in this instance.
thank you! that should just happen once, because here I put the hook directly in the render body, so the first time you save because of hot refresh, you're adding a hook that wasn't there the previous render. you can always move the hook up and set the return value in a variable, and then use that in the JSX, if it's causing you problems (for example due to any conditional rendering in your template).
You and @ThePrimeagen, inspired me give Vim a try,
I installed the Intellij's IdeamVim plugin.....
☠ First two were hard... I really struggled...
🔥 But I must admit after 5 days now.... There is no going back !!! 🚀
So thank you so much for the good content and the inspiration 💪
He's using vscode...
@@redaaaa with Vim plugin
@@redaaaa Yes I know :) But I'm using PhpStorm. 😊
Hey Sam, wondering what you use for the automatic string interpolation at 8:35? Namely just it automatically switch from " to ` after the ${} input? This would save me literal seconds!
Template String Coverter
Great animation! I'm wondering if the animation would still work if you changed react useState with useRef and update ref values instead?
Always impressed by your videos, Keep it up!
Awesome tutorial, thank you!
Wondering, is it possible to create scroll-spy functionality with framer-motion?
love your content so much ❤
Great video Sam!
great as per usual
Classic Ugmonk shirt 😎
What extension do you use in VScode to turn quotes into template strings automatically Sam?
Really impressed brother 😍
Great Video!!
Hey Sam, Framer-motion's lib seems so extensive, how do you find all these new hooks/functions? Do you just explore the docs?
Big like 👌 👍 😗. Thank you...
What Headwind config do you use? I saw when you wrote `group` in the parent div (14:53), automatically the group change position in class name
pd: I love your content!
Amazing as always! On a side note, are you using the oficial Dracula theme on vscode or is it some variant? It looks darker and nicer.
NEAT !
hey Sam what extension your'e using for tailwind class auto alignment on save
It's called Headwind
Prettier plugin does it automatically.
Just one question to you Sam is it good to copy your code and it into our portfolio?
Awesomeness 🎉
I realized that u should have used offsetX and offsetY to find the center and your video can be shorter too.😅
damnn
1st view 🙃