Loading video...

Video Failed to Load

Go Home

🎠Parallax Carousel Custom React Native animated Carousel that has the same API as FlatList, that's using React Native Reanimated to animate each individual Carousel Item but also `useAnimatedSensor` to apply the "Parallax" effect to the active carousel item.

mironcatalin's profile picture

Catalin Miron - AnimateReactNative.com

12,117 subscribers

25,793 views • 2 years ago •via X (Twitter)

Science & TechnologyEducation
LIVE

Anya Rossi• Live Now

Private livecam show

11 Comments

Catalin Miron - AnimateReactNative.com's profile picture
Catalin Miron - AnimateReactNative.com2 years ago

High resolution recording. 🔜

onlydans's profile picture
onlydans2 years ago

sickkk

Catalin Miron - AnimateReactNative.com's profile picture
Catalin Miron - AnimateReactNative.com2 years ago

Thanks ✌️

Hewad Mubariz's profile picture
Hewad Mubariz2 years ago

👏👏👏

Catalin Miron - AnimateReactNative.com's profile picture
Catalin Miron - AnimateReactNative.com2 years ago

Thank you Hewad! ✌️

Hemant C. Sharma's profile picture
Hemant C. Sharma2 years ago

very nice Catalin!! good to see you back in action

Catalin Miron - AnimateReactNative.com's profile picture
Catalin Miron - AnimateReactNative.com2 years ago

Thanks Hemant! ✌️

Nikita Trifan's profile picture
Nikita Trifan2 years ago

Another play might be to parallax all of the cards in the viewport

Catalin Miron - AnimateReactNative.com's profile picture
Catalin Miron - AnimateReactNative.com2 years ago

You can do it, I'm purposely limit the parallax to the current (middle) item.

Francesco's profile picture
Francesco2 years ago

OMG OMG 😱

Catalin Miron - AnimateReactNative.com's profile picture
Catalin Miron - AnimateReactNative.com2 years ago

Thanks Fransis! 🤗

Related Videos

Cover flow Music Carousel with Shared Element Transition, built in React Native powered by Software Mansion’s Reanimated Library. We couldn’t have done this without all the hard work of awesome RN community behind these libraries now at React Native EU is now React Universe Conf Design by @_iamsandeep & Dev by Karthik Balasubramanian
0:24

Cover flow Music Carousel with Shared Element Transition, built in React Native powered by Software Mansion’s Reanimated Library. We couldn’t have done this without all the hard work of awesome RN community behind these libraries now at React Native EU is now React Universe Conf Design by @_iamsandeep & Dev by Karthik Balasubramanian

Timeless

10,947 views • 2 years ago

How to Implement a custom Accordion in react-native? using reanimated
0:50

How to Implement a custom Accordion in react-native? using reanimated

Ashu

31,861 views • 2 years ago

AppleTV App Animated Carousel Using SwiftUI NOTE: This is a ScrollView!
0:23

AppleTV App Animated Carousel Using SwiftUI NOTE: This is a ScrollView!

Kavsoft

17,608 views • 2 months ago

Finally got to animate this carousel.🚧 Made with Figma of course. 🪄
0:20

Finally got to animate this carousel.🚧 Made with Figma of course. 🪄

Oluwapelumi

63,472 views • 1 year ago

It's called the QB carousel
2:11

It's called the QB carousel

Nick Olson

314,920 views • 2 years ago

"Marusya's Carousel". Excerpt from 1977 Soviet animated film.
4:35

"Marusya's Carousel". Excerpt from 1977 Soviet animated film.

Soviet Visuals

18,352 views • 1 month ago

Carousel live from the #ACMawards song out on Amazon Music May 16 🎠 Presave here:
0:29

Carousel live from the #ACMawards song out on Amazon Music May 16 🎠 Presave here:

Miranda Lambert

179,498 views • 3 years ago

A spin on the coaching carousel:
2:35

A spin on the coaching carousel:

Adam Schefter

1,062,443 views • 1 year ago

Create a visually appealing and animated sticky scroll header effect that uses interchangeable carousel cards. For more 👇
0:21

Create a visually appealing and animated sticky scroll header effect that uses interchangeable carousel cards. For more 👇

Kavsoft

16,497 views • 1 year ago

Tomlin ➡️ BAL? Harbaugh ➡️ PIT? Carr ➡️ LV??? Derek and David react to the latest news in the NFL coaching carousel, and pitch some interesting landing spots 👀
0:36

Tomlin ➡️ BAL? Harbaugh ➡️ PIT? Carr ➡️ LV??? Derek and David react to the latest news in the NFL coaching carousel, and pitch some interesting landing spots 👀

Home Grown with David & Derek Carr

45,968 views • 4 months ago

carousel ride..
0:27

carousel ride..

july

77,688 views • 1 year ago

I’ve opened a PR to React Native to add support for 120 FPS Animations while using the Animated API 🚀 Check it out:
0:27

I’ve opened a PR to React Native to add support for 120 FPS Animations while using the Animated API 🚀 Check it out:

Oskar Kwaśniewski

10,961 views • 1 year ago

Animated img carousel 🤙 Use CSS trig functions to get radius and layout images as a cylinder 🤓 Use scroll animation to rotate the cylinder 📜 :root { --a: calc((360 / var(--total)) * 1deg); --r: calc((var(--item-width) / sin(var(--a))) * -1); } Explained 👇
1:03

Animated img carousel 🤙 Use CSS trig functions to get radius and layout images as a cylinder 🤓 Use scroll animation to rotate the cylinder 📜 :root { --a: calc((360 / var(--total)) * 1deg); --r: calc((var(--item-width) / sin(var(--a))) * -1); } Explained 👇

jhey ʕ•ᴥ•ʔ

348,300 views • 2 years ago

Carousel (Carousel for Excel) is an AI assistant for Excel that builds spreadsheets & models for you in minutes. It's what Microsoft’s Copilot for Excel promised to be.
1:26

Carousel (Carousel for Excel) is an AI assistant for Excel that builds spreadsheets & models for you in minutes. It's what Microsoft’s Copilot for Excel promised to be.

Y Combinator

69,891 views • 1 year ago

A spin on the NFL coaching carousel.
6:05

A spin on the NFL coaching carousel.

Adam Schefter

2,704,307 views • 1 year ago

Carousel illusion
0:29

Carousel illusion

Interesting AF

70,654 views • 1 year ago