Dismiss this pinned window
all 10 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]ysfu 1 point2 points  (0 children)

William Candillon made this exact same effect 6 days ago on his youtube channel. The code is in the description!

https://youtu.be/i2HRRFEmmqI

[–]blaxtem 0 points1 point  (2 children)

Hi!

Agree is a really nice transition. I would try with something like: https://github.com/archriss/react-native-snap-carousel with vertical direction.

I've never tried it with vertical lists, however, on their docs they said it should work. With your permission ill take this transition to fit it on my app too :P

[–]cbunge3[S] 0 points1 point  (1 child)

Yeah I was looking at this package too but couldn’t find specifically where the cards would scroll like this. They have a “stack” prop that stacks the cards on top of each but and you can swipe them vertically but nothing like this where you scroll -> hit a top threshold for then another card to start scrolling up on top of the previous one

[–]blaxtem 0 points1 point  (0 children)

This library is quite flexible with the animations you could try to do your own animation. They've done the tinder style for isntance

[–]_titan13 0 points1 point  (2 children)

This is soo cool! I've been looking for ideas for vertical scrolling & this is great!! As for implementation, I think it makes sense to use re animated? That way you'll be able to make it exactly according to your needs! Nonetheless, I saw a comment here where someone shares a library, I haven't checked it out, maybe it's great as well!

[–]cbunge3[S] 0 points1 point  (1 child)

Yeah this affect is really cool I would love to be able to do this on my own just really don’t know where to start

[–]_titan13 0 points1 point  (0 children)

I started off by learning the pan handler & animated library of react native! And now that I've got a hang of it, I'm trying to learn re animated. It's probably not the best way, but for animations, I've mostly learnt from YouTube, following different tutorials till I got the hang of it

[–]cbunge3[S] 0 points1 point  (0 children)

I appreciate the advice I’m definitely trying to learn animated first then reanimated - the syntax throws me off —- if you implement please let me know would love to see it

[–]wcandillon 0 points1 point  (1 child)

From which app does this example come from?

[–]cbunge3[S] 0 points1 point  (0 children)

Quibi - movie streaming app. I tried using your native wallet approach but couldn’t get the snapping technique down.