Slide Picker #1728
Unanswered
coreapostrophe
asked this question in
Support
Slide Picker
#1728
Replies: 1 comment
-
I guess a starting point to understand the opacity is the distance from the center of the container? Imagine if you drew an imaginary line on the x axis of the middle, say it's 300px from 0 (0 being the top of your container), you can then change the opacity based on the difference from 300. I don't think this is a react-spring specific implementation, but you could use |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
💬About
I'm trying to do a slide picker similar to those you'll find in modern mobile alarms UI. I can imagine a straight-forward way of creating this by creating a list of horizontally aligned numbers, attaching a react-use-gesture drag animation to its Y position, and then using the width of each element to check which number is currently in focus based on the scroll amount.
However, with that method, I'll have to be dependent on the pixel width and height of each item. I'm wondering if there's a better method of achieving this?
👀 Preview
Note: I don't need it to be 3D! I just want to do the sliding picker with edge items decreasing in opacity as they are moved out of the viewable area.
Beta Was this translation helpful? Give feedback.
All reactions