Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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. 👇

devongovett's profile picture

Devon Govett

41,842 subscribers

42,499 Aufrufe • vor 8 Monaten •via X (Twitter)

BildungWissenschaft & Technologie
LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

You can enable scroll snapping with CSS scroll-snap-type and scroll-snap-align 🚀
0:12

You can enable scroll snapping with CSS scroll-snap-type and scroll-snap-align 🚀

David Mráz

22,233 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 9 Monaten

How i build with Claude👇 Three.js = 360 rotatable product zero plugin needed WebGL PointLight = UVC glow reacts to scroll position CSS scroll-snap = buttery infinite horizontal product scroll GSAP ScrollTrigger = product pins while copy scrolls alongside Lottie via lottie-web = After Effects animations play in browser Save this
0:10

How i build with Claude👇 Three.js = 360 rotatable product zero plugin needed WebGL PointLight = UVC glow reacts to scroll position CSS scroll-snap = buttery infinite horizontal product scroll GSAP ScrollTrigger = product pins while copy scrolls alongside Lottie via lottie-web = After Effects animations play in browser Save this

FHILY👑

166,927 Aufrufe • vor 1 Monat

Let's make Android development in React Native great and fun again. This is the official native Material 3 carousel composable rendered using Expo native views. The result is a simple-to-use React component with all native behavior (gestures and transitions) built in.
0:19

Let's make Android development in React Native great and fun again. This is the official native Material 3 carousel composable rendered using Expo native views. The result is a simple-to-use React component with all native behavior (gestures and transitions) built in.

Oliver Lopez

19,321 Aufrufe • vor 1 Jahr

Animating React Aria Tabs, ToggleButtonGroup, etc. is about to be super easy with the new SelectionIndicator component. 🥳 • Native CSS transitions, no animation library needed. • Works with SSR with no flicker before JS runs. • No ResizeObserver. • Enter + exit animations.
0:13

Animating React Aria Tabs, ToggleButtonGroup, etc. is about to be super easy with the new SelectionIndicator component. 🥳 • Native CSS transitions, no animation library needed. • Works with SSR with no flicker before JS runs. • No ResizeObserver. • Enter + exit animations.

Devon Govett

22,905 Aufrufe • vor 9 Monaten

Neat trick with tail swipe Via/Roamingjoker
0:17

Neat trick with tail swipe Via/Roamingjoker

Marvel Rivals Intel

201,587 Aufrufe • vor 1 Monat

📝 Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again when scrolling up By adding a long transition-delay to a CSS property under certain conditions (with a Style Query), you can persist its value Demo by Fabrizio Calderan
0:16

📝 Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again when scrolling up By adding a long transition-delay to a CSS property under certain conditions (with a Style Query), you can persist its value Demo by Fabrizio Calderan

Bram.us (by @bramus)

15,624 Aufrufe • vor 1 Jahr

Infinite Marquee Scrolling with Tailwind CSS ✨ ↳
0:11

Infinite Marquee Scrolling with Tailwind CSS ✨ ↳

Surjith S M ✪

103,494 Aufrufe • vor 3 Jahren

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,772 Aufrufe • vor 1 Monat

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! 🤩
0:14

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

Devon Govett

182,609 Aufrufe • vor 3 Jahren

This is my go-to calendar template whenever I build a calendar-based app. Built with Expo 🫶 ⛳️ Everything is ready and easy to update. I've condensed over six years of experience as a design engineer into React Native Components 🖇️
0:15

This is my go-to calendar template whenever I build a calendar-based app. Built with Expo 🫶 ⛳️ Everything is ready and easy to update. I've condensed over six years of experience as a design engineer into React Native Components 🖇️

Erencan Arica

38,843 Aufrufe • vor 5 Monaten

Hotel management dashboard template. Built with React, Tailwind CSS & shadcn/ui 👇👇
0:13

Hotel management dashboard template. Built with React, Tailwind CSS & shadcn/ui 👇👇

Toby

89,083 Aufrufe • vor 3 Monaten

wavy carousel with CSS scroll driven animations not exactly like OP but fun to try replicate
0:17

wavy carousel with CSS scroll driven animations not exactly like OP but fun to try replicate

Wes Bos

71,941 Aufrufe • vor 6 Monaten

Built Gachapon machine with React Native Reanimated Used Skia sksl shader for the bouncy item effect Fun to make this kind of gamification content in React Native
0:13

Built Gachapon machine with React Native Reanimated Used Skia sksl shader for the bouncy item effect Fun to make this kind of gamification content in React Native

Daehyeon 대현

43,098 Aufrufe • vor 1 Jahr

Been checking out Expo's new headless <Tabs /> (again! 😎) and finally got to dig into some CSS transitions with Software Mansion's react-native-reanimated v4 🚀 Tab bar smoothly disappears/reappears as you scroll. Subtle animations and haptics. Feels pretty sweet!
0:13

Been checking out Expo's new headless <Tabs /> (again! 😎) and finally got to dig into some CSS transitions with Software Mansion's react-native-reanimated v4 🚀 Tab bar smoothly disappears/reappears as you scroll. Subtle animations and haptics. Feels pretty sweet!

Jacob Clausen

33,626 Aufrufe • vor 1 Jahr

Slide to Submit + Shimmering Text for Expo Now on GitHub ➤ Copy-paste component, not a library ➤ Built with Software Mansion Reanimated + RNGH ➤ Runs on UI thread (60fps smooth) ➤ Uses react-native-masked-view
0:16

Slide to Submit + Shimmering Text for Expo Now on GitHub ➤ Copy-paste component, not a library ➤ Built with Software Mansion Reanimated + RNGH ➤ Runs on UI thread (60fps smooth) ➤ Uses react-native-masked-view

Solarin

32,485 Aufrufe • vor 1 Jahr

Tailwind CSS Tip ✨ You can create a pure css carousel in Tailwind CSS using scroll snap. Live demo ↓ (21/30) follow for 9 more tips 🔔
0:12

Tailwind CSS Tip ✨ You can create a pure css carousel in Tailwind CSS using scroll snap. Live demo ↓ (21/30) follow for 9 more tips 🔔

Surjith S M ✪

203,353 Aufrufe • vor 3 Jahren

New React Aria release! 🎁 🔎 Autocomplete alpha 📽️ CSS transition support in addition to keyframes 📆 Custom Calendar first day of week 🧪 Unit test utility package for ARIA patterns 🎯 Removed custom hit testing in usePress 🐞 and plenty of bug fixes!
0:16

New React Aria release! 🎁 🔎 Autocomplete alpha 📽️ CSS transition support in addition to keyframes 📆 Custom Calendar first day of week 🧪 Unit test utility package for ARIA patterns 🎯 Removed custom hit testing in usePress 🐞 and plenty of bug fixes!

Devon Govett

35,054 Aufrufe • vor 1 Jahr

Scroll-Triggered Animations … with nothing but CSS … oh yeah 🤩 (Blogpost coming soon)
0:14

Scroll-Triggered Animations … with nothing but CSS … oh yeah 🤩 (Blogpost coming soon)

Bramus

10,348 Aufrufe • vor 7 Monaten