Видео

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

I realized that u should have used offsetX and offsetY to find the center. This way, there's no need for infinity, and your video can be shorter too.

This library is clean! Using it going forward 😎

so for anyone coming back here tryin to figure out how to do this, i figured out a way without having to do any of the magic poor sam had to go through. so table algorithms apply to table elements. important bit of information. key is to have your data in a nested div and if you insist on padding, its gotta be on a div that isn't a motion.div. This is using the latest TanStack Table (An animate present is wrapping the mapped rows within a normal tbody element. exactly like sams. now my expanded rows have some schmexy butter smooth transitions in and out of the dom the styles used are simply tr: "even:bg-surface-content-alt", td: "p-0 m-0", cell: "px-4 py-3", function TableRow<T extends object>({ row }: { row: Row<T> }) { const styles = tableBodyStyles(); return ( <motion.tr initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className={styles.tr()} > {row.getVisibleCells().map((cell) => { const metaType = cell.column.columnDef.meta?.type || "text"; return ( <td className={styles.td()} key={cell.id}> <motion.div initial={{ height: 0 }} animate={{ height: "auto" }} exit={{ height: 0 }}> <div className={styles.cell({ metaType })}> {flexRender(cell.column.columnDef.cell, cell.getContext())} </div> </motion.div> </td> ); })} </motion.tr> ); }

I discovered radix through the hype surrounding shadcn, radix is exactly what I want.

The useFetcher singleton approach has its applications. E.g.: When clicking a like button, you don't want it to send all the requests, you want just the last input.

I don’t get it, the 1st example of 3 independent loaders seems like a better UX than waiting for a 3 fetches to resolve before rendering all at the same time. Data is rendered as soon as it’s available.

Thank you! I like the way you iterate over the solution to make it robust.

Not interested

Soooo Goood!!!! Thanks Sam!

Loved your content ❤

Great tutorial, but it only works for properties of type string since "var(--..." is a string. How would you make it work for properties of type number, like duration and delay.

This to me seems to take away any creativity from ui building or is that ignorant?

Wow, didn't know you could retrive form data just like that. Great tip.

Amazing Sam!

Just found your channel dude, but so far I love it. Your stuff is perfect to have on while you're working , not so much for instructional stuff, but just for new ideas and different approaches.

I'm a fairly experienced developer, and I just finally moved from gsap to framer motion. I always thought I can do everything with gsap so why change, but holy s--t... It's soooooooo much faster and just overall better. I'm actually kind of embarrassed that it took me this long to migrate.

10 lines of code, but you have to know what 10 lines. It always pays to know what you are doing. Thanks for this!

How to revert back if data failed to save in database?

For anyone using Expo (v51), I had to specify a fetcher function on the useSWR hook, otherwise the app would just softlock. Nonetheless great tutorial, thank you!

Hey man, thanks for this video, helped me to solve an issue with a reusable radix dialog size transitions, I even managed to do a back and forth transition for the content in the modal, it looks pretty cool!.

So, now React19, we can use use API with Promise directly?

I love the content you produce so much

Sam you are a one of a kind teacher! Does this come as natural as it looks? Extremely grateful for your videos

огромное спасибо Вам)!

Appreciate these longer format teaching sessions. Your ability to break down and simplify complex problems into easy to digest segments is top tier. Thank you for taking the time to put these videos together man.

how would you handle the activation of other buttons when sliding around?

damn i was JUST looking for ways to make the masonry effect and then this video pops up

you did a great job bruh, earlier I had no idea of this library . Thanks so much

That's great! That's what I need. Thank you very much! You explained everything simply and clearly!

Helpful

Woah.. Didn't know about the event.currenttarget trick for form events. Also, your vim chops are buttery smooth.

Bro, you solved my problem. Thanks so much for this tutorial

Dialog must be outside the list right?

You are a natural teacher.

Just getting into Framer Motion and this is a cool place to kickoff some nice UI updates

thanks bro

i love you, you are the best really , keep publishing more amazing content <3

Thank you! You are making some really good content!

Огромное Вам спасибо, супер урок!)

I really loved this video. Would you be able to describe how to add a tooltip to the graph using your method of react and D3? Not sure how to use the enter method in d3 to link a tooltip to the data. Thanks!

Огромное спасибо. Круто

Excellent stuff @Sam, when are you planning for discount on your courses. I am interested in life time subscription.

Great tutorial on Optimistic UI and fetchers, thanks.

the flicker after clicking the button looks more like a small bug in my eyes lol, even though it's not , am I the only one that thinks this?

огромное спасибо Вам!

what vscode theme are you using?

This is nice, I have been looking at dropdown animation lately and I stumbled upon the that of Semantic Ui dropdown animation, which in my opinion is that best dropdown animation out there. However, the downside to it is that it was done using jquery and css. You might want to take a look at their dropdown animation and hopefully make a video on how this can be achieved using Framer Motion. Nice videos and explanation. Keep them coming 🚀

crazy video, really helpful thank you brother

need to check if component is still mounted. if (currentAnimation === animationCounter.current && isMounted.current) { controls.set({ rotate: 0 }) // Reset rotation without animation }