How to build an Animated Button with React Aria and Framer Motion
Ойын-сауық
Learn how to make better buttons for your websites on both mobile and desktop using the React Aria and Framer Motion libraries.
🚀 Demo: codesandbox.io/s/github/samse...
🧑💻 Code: github.com/samselikoff/2022-0...
🪄 Framer Motion course: samselikoff.com/framer-motion...
📚 Building a Button blog post, from React Aria: react-spectrum.adobe.com/blog...
📖 React Aria useButton docs: react-spectrum.adobe.com/reac...
📖 Framer Motion useAnimation docs: www.framer.com/docs/use-anima...
- 0:00 - Intro
- 2:28 - Fixing text selection
- 3:07 - Fixing scroll
- 3:42 - Problems with HTML buttons
- 6:30 - Using the Press event from React Aria's useButton
- 11:50 - Fixing the keyboard focus ring
- 14:29 - Animating on press with Framer Motion
- 18:40 - Fixing the isPressed feedback
- 23:31 - Making the tap highlight color transparent
- 24:36 - Final refactoring
- 26:47 - Final demo
- 27:55 - Outro
Пікірлер: 47
the sheer amount of good patterns I learn from your vides is unreal, thanks so much for making such amazing content
This channel satisfies my developer OCD, thank you Sam 🔥 React Aria is a great library
High-Quality content, per usual! Best-in-class, Sam! I'm starting my new job this next week, and the company's technical interview quizzed me on ARIA attributes, so it's cool to see how seamless you've integrated our favorite technologies! Commenting for the algorithm ;) Cheers, boss!
@samselikoff
2 жыл бұрын
Haha thanks Josh, best of luck at the new digs! 👊
I get excited every time you post a new vid! wooohoo! thank you for your hard work!
I was worried you stopped making videos, I really like your content. Please keep them coming!
@samselikoff
2 жыл бұрын
Just needed a little break during summer, it's so nice in nyc right now :)
Really incredible content as usual. I love your attention to detail, it’s an inspiration for me.
Thank you so much for this tutorial! Look forward to your next ones for Framer-motion
I'm working on a keypad feature and this is literal gold! Thanks so much Sam.
I'm glad I discovered your channel, lots of valuable information! Keep up the great work :)
The quality of your videos is really top notch Sam, always best practices and best results bound together.
The quality of your videos is absolutely amazing. I think you deserve a lot more subscribers. Greate job!
React Aria is awesome! Been using it for awhile now, we use it in our design system component library at work as well. Great video as always!
Your contents are always amazing, thanks!
Nothing better than tutorial from Sam!
As usual, top content!
Your channel is slowly becoming my favorite dev related channel! 👍
Your topics are great 👍👍👍
Different space and enter behavior is pretty funny
Thanks you just give me inspiration to add some animation on my project where i have similar functionality.
Very cool! 💪
Awesome channel :)
Wow, it feels just like native iOS button, good job!
Attention to details man, I love it. You must be my brother from another mother! 😅
The TypeScript types between react-aria and framer-motion are incompatible. I'd love to see your "one button to rule them all" implementation (unless ofc you're ignore TypeScript ;)
Dope
unfortunately in my case, i can prevent the button text from highlighting but my iphone instead just highlights the nearest text element on long press
wowowowowow, I was putting off implementing much of this covered for my own app and I am just so happy to see someone who is thinking about the same things as me!
how would you handle the activation of other buttons when sliding around?
Can you please make a range picker using React aria.
Is there a reason your'e using let instead of const? Lines 34-36? never seen let used using hooks, would be good to know going forward!
Does that button work perfectly for form submit buttons?
wow
Pls what extension are you using to to see the CSS style of a tailwind class?
@samselikoff
Жыл бұрын
The official Tailwind CSS IntelliSense extension! marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
@veedjohnson
Жыл бұрын
@@samselikoff thanks a lot
What are you using to simulate running the app on a mobile device? thanks
@samselikoff
Жыл бұрын
The Simulator from Xcode! Open Xcode, then in the menu bar click Xcode > Open Developer Tool > Simulator. Check out the first tip from this video if you want to watch me open it up: kzread.info/dash/bejne/fa6qrZppadXSY7Q.html
@FergusMeiklejohn
Жыл бұрын
@@samselikoff brilliant thanks! that whole video is so useful 🥳
May I ask which vscode theme you use?
@samselikoff
2 жыл бұрын
Yep it's Atom One Dark!
Love the content, but I would argue that bringing framer-motion for simple animation adds a 40KB bundle size overhead that is not justifiable when you just want a button
10:14 If you keep the `active:[757376]`, even though there are consistencies between browsers, that may still work on some browsers before JavaScript is loaded.
Really incredible content as usual. I love your attention to detail, it’s an inspiration for me.