Loading video...

Video Failed to Load

Go Home

I built an iOS-style modal sheet with React Aria Components and Framer Motion! It uses gesture-driven animations to feel super smooth and natural on touch devices. It's a surprisingly small amount of code too. Check it out! 🤩

devongovett's profile picture

Devon Govett

41,861 subscribers

182,609 views • 3 years ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Introducing Motion-Primitives: a collection of reusable animated components built with Framer Motion and Tailwind CSS.
0:15

Introducing Motion-Primitives: a collection of reusable animated components built with Framer Motion and Tailwind CSS.

Ibelick

88,945 views • 2 years ago

How I built an Anime.js-style site with Claude 👇 • Ask Claude to plan a minimal interactive website with smooth motion • Install Anime.js → "npm i animejs" • Use Claude to generate timelines, staggered text, and hover animations • Add smooth SVG, scroll, and cursor interactions with Anime.js • Keep UI minimal so motion becomes the focus • Use easing + timing to make animations feel fluid and premium Save this 🚀
0:13

How I built an Anime.js-style site with Claude 👇 • Ask Claude to plan a minimal interactive website with smooth motion • Install Anime.js → "npm i animejs" • Use Claude to generate timelines, staggered text, and hover animations • Add smooth SVG, scroll, and cursor interactions with Anime.js • Keep UI minimal so motion becomes the focus • Use easing + timing to make animations feel fluid and premium Save this 🚀

FHILY👑

346,601 views • 2 months ago

✨ Introducing Magic UI 🪄 A UI library of animated components to build beautiful landing pages. Built using React, Tailwind CSS and Framer motion. 100% Free and Open Source.
0:17

✨ Introducing Magic UI 🪄 A UI library of animated components to build beautiful landing pages. Built using React, Tailwind CSS and Framer motion. 100% Free and Open Source.

Dillion

324,699 views • 2 years ago

Finished work on "ripple" click effect. That was surprisingly tricky to implement. I might polish the style and feel of it, but overall I'm pretty happy with it.
0:17

Finished work on "ripple" click effect. That was surprisingly tricky to implement. I might polish the style and feel of it, but overall I'm pretty happy with it.

Adam Pietrasiak

19,110 views • 2 years ago

FREE template built in Framer ✨🖱 Uses a cool cursor effect, 100% built in Framer Comment "Framer" and I'll send it to you 👇 (must be following so I can DM you)
0:13

FREE template built in Framer ✨🖱 Uses a cool cursor effect, 100% built in Framer Comment "Framer" and I'll send it to you 👇 (must be following so I can DM you)

Ryan Hayward

28,303 views • 2 years ago

A list (with code) of cool framer-motion and Tailwind CSS components from around the internet ✨ 1️⃣ Tooltip A simple and elegant tooltip component that follows the mouse pointer
0:11

A list (with code) of cool framer-motion and Tailwind CSS components from around the internet ✨ 1️⃣ Tooltip A simple and elegant tooltip component that follows the mouse pointer

Aceternity

43,391 views • 2 years ago

Financial AI assistant Pull it up when you need it. Push it away when you don’t. Subtle haptics. Fluid motion. Natural feel. 🎥👇 … Built with React Native Expo
0:13

Financial AI assistant Pull it up when you need it. Push it away when you don’t. Subtle haptics. Fluid motion. Natural feel. 🎥👇 … Built with React Native Expo

The Artist

23,633 views • 1 year ago

Squircles, now in Framer. Design layouts and components with smooth corners, with complete support for animations. Using the modern corner-shape style, with our own unique fallback matching the optical rounding, so your designs never break.
0:12

Squircles, now in Framer. Design layouts and components with smooth corners, with complete support for animations. Using the modern corner-shape style, with our own unique fallback matching the optical rounding, so your designs never break.

benjamin

38,669 views • 6 months ago

My go-to calendar template is now FREE on React Native Components. Built with Expo 📱 As a thank-you, feel free to follow Appeeky 🫶 Source code:
0:15

My go-to calendar template is now FREE on React Native Components. Built with Expo 📱 As a thank-you, feel free to follow Appeeky 🫶 Source code:

Erencan Arica

22,555 views • 1 month ago

Built a React Aria Calendar with swipe gestures to navigate between months! Uses CSS scroll snap for native 120fps animations, with a neat trick to enable infinite scrolling in both directions. 👇
0:17

Built a React Aria Calendar with swipe gestures to navigate between months! Uses CSS scroll snap for native 120fps animations, with a neat trick to enable infinite scrolling in both directions. 👇

Devon Govett

42,499 views • 8 months ago

How to use Framer Motion with Server Components
0:17

How to use Framer Motion with Server Components

Alex Sidorenko

103,285 views • 2 years ago

I rebuilt one of the prototypes I made for Attio with v0. It's coming out surprisingly easily now that I know the technical solution. The code looks really clean and matches about 90% of how I originally built it.
0:10

I rebuilt one of the prototypes I made for Attio with v0. It's coming out surprisingly easily now that I know the technical solution. The code looks really clean and matches about 90% of how I originally built it.

Alex Krasikov

68,906 views • 1 year ago

We've added 4 new animated Base UI components to Animate UI: 🔹 Progress 🔹 Accordion 🔹 Toggle Group 🔹 Preview Card Fully animated with Motion and built with shadcn styling. Check it out 👇
0:17

We've added 4 new animated Base UI components to Animate UI: 🔹 Progress 🔹 Accordion 🔹 Toggle Group 🔹 Preview Card Fully animated with Motion and built with shadcn styling. Check it out 👇

Animate UI

28,403 views • 1 year ago

Super excited to announce react-native-godot: A seamless integration of the Godot Engine with React Native for iOS and Android! Now you can create games with native UI components, giving them a polished, platform-native feel. Plus, you'll have full access to the engine and all GDScript functions directly within React Native, fully typed for an enhanced development experience. Since it's a standalone library, simply import a .pck file, and you're good to go. Open-sourcing in the coming weeks!
0:10

Super excited to announce react-native-godot: A seamless integration of the Godot Engine with React Native for iOS and Android! Now you can create games with native UI components, giving them a polished, platform-native feel. Plus, you'll have full access to the engine and all GDScript functions directly within React Native, fully typed for an enhanced development experience. Since it's a standalone library, simply import a .pck file, and you're good to go. Open-sourcing in the coming weeks!

Jannis Ringwald

59,037 views • 1 year ago

Pretty amazing that we can now implement swipeable Tabs with native CSS. Updating the React Aria demo I made a few years ago to use native scroll snapping, scroll timeline, and anchor positioning instead of Framer Motion. Feels smooooooth! 🎉
0:15

Pretty amazing that we can now implement swipeable Tabs with native CSS. Updating the React Aria demo I made a few years ago to use native scroll snapping, scroll timeline, and anchor positioning instead of Framer Motion. Feels smooooooth! 🎉

Devon Govett

83,922 views • 9 months ago

Reanimated 4.3.0 is out with a lot of exciting features! 🚀 ✦ CSS animations for SVG components – animate vector graphics with just a few lines of code ✦ Shared Values on multiple threads at once – easily control animations in apps that already have a lot of multithreaded code And that's not all – check out the full release notes! ⬇️
0:12

Reanimated 4.3.0 is out with a lot of exciting features! 🚀 ✦ CSS animations for SVG components – animate vector graphics with just a few lines of code ✦ Shared Values on multiple threads at once – easily control animations in apps that already have a lot of multithreaded code And that's not all – check out the full release notes! ⬇️

Software Mansion

18,717 views • 3 months ago

i couldn't find any good chart library for mobile, so i built my own - fully native for android and ios - 60 fps ultra-smooth scrolling - indicators and drawing tool - fluid gesture recognition - real-time updates react native / swift
0:19

i couldn't find any good chart library for mobile, so i built my own - fully native for android and ios - 60 fps ultra-smooth scrolling - indicators and drawing tool - fluid gesture recognition - real-time updates react native / swift

Suhail Kakar

61,224 views • 6 months ago

Saw an amazing Cavalry animation by Antonin Waterkeyn and had to rebuild it as a live browser interaction. Built with Claude Code: React + three.js + leva. 🔗
0:15

Saw an amazing Cavalry animation by Antonin Waterkeyn and had to rebuild it as a live browser interaction. Built with Claude Code: React + three.js + leva. 🔗

Design.Gabor

19,754 views • 2 months ago

AI can generate animation code. It can't feel timing. I built a skill that teaches AI agents Disney's 12 principles for UI motion, so there's actual intention behind the movement, not just math. Works with CSS, GSAP, Framer Motion & Lottie. Same prompt with Claude. Watch what changes 👇
0:10

AI can generate animation code. It can't feel timing. I built a skill that teaches AI agents Disney's 12 principles for UI motion, so there's actual intention behind the movement, not just math. Works with CSS, GSAP, Framer Motion & Lottie. Same prompt with Claude. Watch what changes 👇

Nattu

33,266 views • 2 months ago