Skip to content
This repository has been archived by the owner on Jan 19, 2025. It is now read-only.

Commit

Permalink
Formatting 🚀
Browse files Browse the repository at this point in the history
  • Loading branch information
chicio committed Dec 31, 2024
1 parent b4f317e commit 00ce65c
Showing 1 changed file with 9 additions and 7 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,15 @@ leveraging the power of React Native Reanimated.*

Recently, during a one-to-one meeting with my engineering manager, [Luca D'antona](https://www.linkedin.com/in/lucadantona/),
we discussed some exciting animations we’d like to bring to our mobile apps at [lastminute.com](https://corporate.lastminute.com).
In particular, Luca pointed out how captivating the carousel on the home screen of the official
[Apple TV app](https://www.apple.com/apple-tv-app/) is. This carousel stands out for its stunning parallax animation.
Essentially, as you scroll through the images of TV shows/movies, the images shift based on the scroll position,
In particular, Luca pointed out how captivating the carousel on the home screen of the official
[Apple TV app](https://www.apple.com/apple-tv-app/) is.
This carousel stands out for its stunning parallax animation.
Essentially, as you scroll through the images of TV shows and movies, the images shift based on the scroll position,
adding a dynamic sense of motion to the entire experience.
In our apps we have been using [React Native](/2018/07/04/react-native-typescript-existing-app/) for quite some
time, but animations often have a bad reputation within this framework.
Luca challenged the team, asking: “Do you think it’s possible to implement such a cool animation on our daily deals carousel? ChatGPT says it should be possible!”
Luca challenged the team, asking: “Do you think it’s possible to implement such a cool animation on our daily deals
carousel? ChatGPT says it should be possible!”.
I took this challenge personally because I’m passionate about animations—a natural consequence of my love for
[computer graphics](/2017/08/25/how-to-calculate-reflection-vector/)).
And here I am today, having successfully implemented the challenge and enhanced our daily deals carousel with this
Expand Down Expand Up @@ -152,10 +154,9 @@ export const useCircularCarousel = (items: ParallaxCarouselItemData[]) => {
Now that we have our carousel in `FlatList` iin place, we can implement the `ParallaxCarouselItem` component. This
component receive the `scrollX` offset from the parent, and pass it to the `useParallaxWithOpacityAnimations` hook
to calculate the animation needed.
In terms strictly of UI, the component is quite straight forward.
In terms strictly of UI, the component is quite straight forward.
It has an image fullscreen, wrapped by a `Animated.View` that we will use to apply the parallax animation.
A `LinearGradient` is used to add som contrast with the texts at the bottom of the item, created using `Animated.
Text` views.
A `LinearGradient` is used to add som contrast with the texts at the bottom of the item, created using `Animated.Text` views.

```tsx
import Animated, {SharedValue} from "react-native-reanimated";
Expand Down Expand Up @@ -292,6 +293,7 @@ data.

```tsx
import {ParallaxCarousel} from "@/parallax-carousel/parallax-carousel";

const items = [
{
id: '1',
Expand Down

0 comments on commit 00ce65c

Please sign in to comment.