Pro tip: 👍 Like before watching. It's going to be good!

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

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.

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!

you just keep on posting bangers. Love it!

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.

Always impressed by your videos, Keep it up!

love your content so much ❤

absolute god-tier video, hats off sir

Incredible vids. Thank you!!

Glorious video

awesome effect

We don't deserve this tutorial. Thanks Sam. I learned a lot... Again... Please keep it coming! ☺

Great video Sam!

Great video, Sam! Thumbs up!

great as per usual

Great Video!!

hey that gradient position option is awesome

Framer should sponsored you for all hi quality contents on framer motion, love it!

Really impressed brother 😍

I just love Jamie Lanister teaching me front end

@samselikoff

Жыл бұрын

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 😂

@fiordnord

Жыл бұрын

@@samselikoff Definitely the compliment! Only based on visual resemblance😄

Loved it!! ❤ Recreated it in Vanilla and then in React also (no framer)

@ammargillani509

Жыл бұрын

Would love to see a video on a vanilla version of this Florin. Great video Sam!!

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 :)

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

@kemplerart9707

11 ай бұрын

For navigation, I think he uses the Vim plugin.

🔥More framer motion content please!

Awesomeness 🎉

NEAT !

Such a great video and effect. Unfortunately KZread's compression doesn't do it justice. You should consider publishing your videos in 4k too. Keep up the great work!

@samselikoff

Жыл бұрын

Great idea - I was wondering about how to fix that. Will be experimenting on this soon!

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.

Big like 👌 👍 😗. Thank you...

Awesome tutorial, thank you! Wondering, is it possible to create scroll-spy functionality with framer-motion?

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

@samselikoff

Жыл бұрын

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.

@muhammadrashid7724

11 ай бұрын

@@samselikoff nice explanation.

Great animation! I'm wondering if the animation would still work if you changed react useState with useRef and update ref values instead?

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.

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?

Classic Ugmonk shirt 😎

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.

@samselikoff

Жыл бұрын

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 💪

@redaaaa

Жыл бұрын

He's using vscode...

@heyiamigor

Жыл бұрын

@@redaaaa with Vim plugin

@maxwebstudio

Жыл бұрын

​@@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!

@abe10

Жыл бұрын

Template String Coverter

Hey Sam, Framer-motion's lib seems so extensive, how do you find all these new hooks/functions? Do you just explore the docs?

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!

What extension do you use in VScode to turn quotes into template strings automatically Sam?

Just one question to you Sam is it good to copy your code and it into our portfolio?

hey Sam what extension your'e using for tailwind class auto alignment on save

@redaaaa

Жыл бұрын

It's called Headwind

@very_unique_username

Жыл бұрын

Prettier plugin does it automatically.

I realized that u should have used offsetX and offsetY to find the center and your video can be shorter too.😅

damnn

1st view 🙃

-I’d like to recommend to never ever use “transparent” keyword to specify a transparent colour, especially in gradient steps. First step colour with zero opacity works much better.-

@samselikoff

Жыл бұрын

Why?

@very_unique_username

Жыл бұрын

@@samselikoff oh well, I guess there's no reason why, just tried using "transparent" myself and I don't see any difference at all. A long time ago I've had issues with using "transparent" because technically it's a black colour and in some environments it resulted in uneven gradient with visible dithering since it was interpolating from the starting colour to the transparent black. Actually, in React Native (react-native-svg) I've had this issue half a year ago, so I guess it's still a good rule of thumb for me.