Loading video...

Video Failed to Load

Go Home

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

40,406 subscribers

41,687 views • 7 months ago •via X (Twitter)

EducationScience & Technology
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related 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 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 • 8 months ago

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👑

165,398 views • 19 days ago

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

18,097 views • 1 year ago

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 views • 9 months ago

📝 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,617 views • 1 year ago

Neat trick with tail swipe Via/Roamingjoker
0:17

Neat trick with tail swipe Via/Roamingjoker

Marvel Rivals Intel

200,232 views • 1 month ago

Infinite Marquee Scrolling with Tailwind CSS ✨ ↳
0:11

Infinite Marquee Scrolling with Tailwind CSS ✨ ↳

Surjith S M ✪

103,493 views • 3 years ago

How to enable swipe gestures on 𝕏 (iOS)
0:13

How to enable swipe gestures on 𝕏 (iOS)

DogeDesigner

4,093,351 views • 1 year ago

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

88,879 views • 3 months ago

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,512 views • 5 months ago

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,749 views • 4 months ago

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 views • 1 year ago

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 views • 1 year ago

The biggest problem with AI app builders is their lack of up-to-date documentation. We now have web search built into our Vibecode Agent. Just ask it to search how to use tricky libraries like react-native-gesture-handler and reanimated for Animations & Gestures. Check out my 2048 clone I made in 2 prompts. 🎮🎲
0:10

The biggest problem with AI app builders is their lack of up-to-date documentation. We now have web search built into our Vibecode Agent. Just ask it to search how to use tricky libraries like react-native-gesture-handler and reanimated for Animations & Gestures. Check out my 2048 clone I made in 2 prompts. 🎮🎲

vibecode

29,570 views • 11 months ago

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,331 views • 6 months ago

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,341 views • 3 years ago

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 views • 1 year ago

Every site has a story to scroll 📖 With the new Scroll-Triggered Animations, you can transform your site into an immersive narrative that keeps your users engaged. Create beautiful time-based animations with zero JS, all natively in CSS. Break free from static UI and create your story in minutes. #GoogleIO
0:15

Every site has a story to scroll 📖 With the new Scroll-Triggered Animations, you can transform your site into an immersive narrative that keeps your users engaged. Create beautiful time-based animations with zero JS, all natively in CSS. Break free from static UI and create your story in minutes. #GoogleIO

Chrome for Developers

12,135 views • 26 days ago

A little sneak peek into one of many animations done for a new project Last9. 🙈 → The motion is in sync with the scroll progress. Created using SCSS and a little bit Svelte magic to control the CSS Variables.
0:10

A little sneak peek into one of many animations done for a new project Last9. 🙈 → The motion is in sync with the scroll progress. Created using SCSS and a little bit Svelte magic to control the CSS Variables.

Tushar

12,555 views • 2 years ago