Pose: snapPoints option

[souporserious]

Is your feature request related to a problem? Please describe. Building a view-pager on the web is hard. We're getting new CSS features like CSS snap points, but they seem somewhat constrained on what we'll be able to do with them. I'd also love if this could eventually work in other targets like React Native and Vue.

Describe the solution you'd like I think to start, adding a snapPoints option could work really well. I think modeling it after React Native Interactable could be nice. This would allow us to build view-pagers as well as make other interactions like swipeable cards and drawers easier. It could hopefully end up allowing interesting results like mixing snap points with a window library like react-window. Something to think about is how they might work with different animations so we wouldn't need add additional options like springPoints, gravityPoints, etc.

Describe alternatives you've considered I've explored building my own view-pager with Pose and React as seen here, but it ended up being more verbose than I would have liked. Also, if I wanted to build a swipeable card interaction or something similar I'd need to either duplicate code or maintain my own abstraction.

I can start working on a PR if this sounds of interest. Please let me know @InventingWithMonster.

[Andarist]

Im not entirely sure, its 2am here and ive looked super briefly at this, but I think it can be implemented way easier using values/parentValues props. This doesnt ofc negate the fact that this could be supported in the core. On Fri, 14 Sep 2018 at 21:23, Travis Arnold notifications@github.com wrote:

Is your feature request related to a problem? Please describe. Building a view-pager on the web is hard. We're getting new CSS features like CSS snap points https://medium.com/@_zouhir/swipe-views-with-css-snap-points-building-a-more-efficient-mobile-web-navigation-f9ac8c53dbc0, but they seem somewhat constrained on what we'll be able to do with them. I'd also love if this could eventually work in other targets like React Native and Vue.

Describe the solution you'd like I think to start, adding a snapPoints option could work really well. I think modeling it after React Native Interactable https://github.com/wix/react-native-interactable/blob/master/PROPS.md#snappoints-array-of-points could be nice. This would allow us to build view-pagers as well as make other interactions like swipeable cards and drawers easier. It could hopefully end up allowing interesting results like mixing snap points with a window library like react-window https://codesandbox.io/s/n7v0904xxj. Something to think about is how they might work with different animations so we wouldn't need add additional options like springPoints, gravityPoints, etc.

Describe alternatives you've considered I've explored building my own view-pager with Pose and React as seen here https://codesandbox.io/s/3qyrmpmw9m, but it ended up being more verbose than I would have liked. Also, if I wanted to build a swipeable card interaction or something similar I'd need to either duplicate code or maintain my own abstraction.

I can start working on a PR if this sounds of interest. Please let me know @InventingWithMonster https://github.com/InventingWithMonster.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/Popmotion/popmotion/issues/489, or mute the thread https://github.com/notifications/unsubscribe-auth/AJWMkqi4VCNjjsPTBSoVkFNS5Me-PGaxks5ubAIcgaJpZM4Wp0Lx .

[mattgperry]

Yeah personally I think this is something that should be supported. You’ll probably have most luck adding it to popmotion-pose On Sat, 15 Sep 2018 at 01:11, Mateusz Burzyński notifications@github.com wrote:

Im not entirely sure, its 2am here and ive looked super briefly at this, but I think it can be implemented way easier using values/parentValues props. This doesnt ofc negate the fact that this could be supported in the core. On Fri, 14 Sep 2018 at 21:23, Travis Arnold notifications@github.com wrote:

Is your feature request related to a problem? Please describe. Building a view-pager on the web is hard. We're getting new CSS features like CSS snap points < https://medium.com/@_zouhir/swipe-views-with-css-snap-points-building-a-more-efficient-mobile-web-navigation-f9ac8c53dbc0 , but they seem somewhat constrained on what we'll be able to do with them. I'd also love if this could eventually work in other targets like React Native and Vue.

Describe the solution you'd like I think to start, adding a snapPoints option could work really well. I think modeling it after React Native Interactable < https://github.com/wix/react-native-interactable/blob/master/PROPS.md#snappoints-array-of-points

could be nice. This would allow us to build view-pagers as well as make other interactions like swipeable cards and drawers easier. It could hopefully end up allowing interesting results like mixing snap points with a window library like react-window <https://codesandbox.io/s/n7v0904xxj . Something to think about is how they might work with different animations so we wouldn't need add additional options like springPoints, gravityPoints, etc.

Describe alternatives you've considered I've explored building my own view-pager with Pose and React as seen here https://codesandbox.io/s/3qyrmpmw9m, but it ended up being more verbose than I would have liked. Also, if I wanted to build a swipeable card interaction or something similar I'd need to either duplicate code or maintain my own abstraction.

I can start working on a PR if this sounds of interest. Please let me know @InventingWithMonster https://github.com/InventingWithMonster.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/Popmotion/popmotion/issues/489, or mute the thread < https://github.com/notifications/unsubscribe-auth/AJWMkqi4VCNjjsPTBSoVkFNS5Me-PGaxks5ubAIcgaJpZM4Wp0Lx

.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Popmotion/popmotion/issues/489#issuecomment-421514765, or mute the thread https://github.com/notifications/unsubscribe-auth/AHfLKpIe-XREaFqJQeqFM-0F4iscd18Aks5ubEW_gaJpZM4Wp0Lx .

[souporserious]

Excited about the new Popcorn lib! You're killing it @InventingWithMonster 🙌. Looks like snap will be perfect for this 😍, going to play around with things as soon as I get a chance.

[souporserious]

Finally got a chance to play around here. This is just bolting it on top of pose, would probably be a little cleaner inside of the pose library itself. The snap function from Popcorn worked perfectly for this use case 🎉

How do you think the snapPoints option should work? I was thinking we could infer the structure from draggable. If it's true it will look for a tuple describing each x and y point, else if either x or y it will apply points to the respective side.

I'll start a PR as soon as I get a chance if the above looks like the right direction.

[Andarist]

This demo is 🔥 there should be some kind of docs section with community demos!

[souporserious]

@Andarist love that idea! I think it could be cool to have a collection of Pose configs that can be easily shared and used amongst the different platforms.

Played with snapPoints some more and made a view-pager pretty easily 🤘going to work on an official PR soon.

[MrLoh]

Hi, I was wondering whether this feature got any further. Looking for a good view pager option at the moment and I love pose