Скачать или смотреть 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: https://codesandbox.io/s/github/samse...

🧑‍💻 Code: https://github.com/samselikoff/2022-0...

🪄 Framer Motion course: https://samselikoff.com/framer-motion...

📚 Building a Button blog post, from React Aria: https://react-spectrum.adobe.com/blog...

📖 React Aria useButton docs: https://react-spectrum.adobe.com/reac...

📖 Framer Motion useAnimation docs: https://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