locked
panning and snap points

    Question

  • Hello guys.

    I've started playing with snap points and I've got a couple of questions. Here it goes:

    1. I've noticed that snap points aren't really "followed" when you use the mouse. for instance, I've used a flexbox layout to scroll through several pictures and I've set the snap points to mandatory and used the 0%-100% for the snap point interval. Now, I've noticed that it works with the finger and that the new image is completely panned into the screen when I use touch. However, I expected that clicking with the mouse over the scrollbar would do the same thing, but in the preview build, I'm only getting 90%of the new picture into the containing div. Is this a bug or snap points aren't respected when you use the mouse??

    2. I'm looking at the scrolling, panning and zooming javascript sample and I've notice that these styles are being used:

    .MandatorySnapInterval
    {
        -ms-scroll-snap-type: mandatory;
        -ms-scroll-snap-points-x: mandatory snapInterval(0%, 100%);
    }
    .ProximitySnapList
    {
        -ms-content-zoom-snap-type: proximity;
        -ms-content-zoom-snap-points: snapList(100%, 200%, 300%, 400%, 500%);
    }

    Now, I've tried defining snapList in my app, but I can't seem to make it work. I did managed to use the interval approach (in both cases, I'm using mandatory snap points>). How can I use snap lists???

    3. Going back to the mandatory vs proximity snap points, I must confess that running the panning/zooming sample that is in the win 8 developer kit was not enough for making me understand the use of proximity. From what I read in the docs, I'm under the impression that proximity will only make the transition when the finger is released near a snap point while mandatory means  you'll always be in a snap point (if the swipe wasn't "good enough" for getting into the new image, you'll end with previous being snapped back into the initial position). Now, my problem with the proximity is that I see no difference from what I get by using it vs not using any snap point at all. Any help?


    Luis Abreu

    Tuesday, February 28, 2012 12:59 PM

Answers

  • Hi Luis,

    I got some information on this.  There will be more documentation coming on these features in the future but this will get you started:

    Snap points and optical zoom is a touch only feature

    Proximity snap-points kick in, not based on where the user releases, but instead based on where the content would naturally stop due to inertia.  The goal of this type of snap-point is to assist the user into landing on interesting content when they are casually panning and to make them feel like they are awesome at panning/zooming.  For example, if the user does a pan with a lot of inertia the snapping threshold grows to make it more likely that the user will happen to land on an “interesting” spot.  If the user lets go with very little inertia, the threshold shrinks so that the user can precisely position the content as they want.

    -Jeff


    Jeff Sanders (MSFT)

    Thursday, March 08, 2012 4:33 PM
    Moderator

All replies

  • Hi Luis,

    I got some information on this.  There will be more documentation coming on these features in the future but this will get you started:

    Snap points and optical zoom is a touch only feature

    Proximity snap-points kick in, not based on where the user releases, but instead based on where the content would naturally stop due to inertia.  The goal of this type of snap-point is to assist the user into landing on interesting content when they are casually panning and to make them feel like they are awesome at panning/zooming.  For example, if the user does a pan with a lot of inertia the snapping threshold grows to make it more likely that the user will happen to land on an “interesting” spot.  If the user lets go with very little inertia, the threshold shrinks so that the user can precisely position the content as they want.

    -Jeff


    Jeff Sanders (MSFT)

    Thursday, March 08, 2012 4:33 PM
    Moderator
  • Hello again Jeff!

    Thanks, this should be enough for testing in the simulator! I'd say that the biggest problem I'm facing is getting the right info about the  great features WinJS offers! Fortunately, you and the other MS guys have been simply awesome!

    Once again, many thanks!!!


    Luis Abreu

    Thursday, March 08, 2012 10:21 PM
  • I am sorry the all the documentation is not up to speed yet.  Our teams are working hard to get this updated!

    -Jeff


    Jeff Sanders (MSFT)

    Friday, March 09, 2012 12:11 PM
    Moderator
  • Shouldn't content function the same with mouse or finger scrolling?  I'm having the same issue - I have content that doesn't make sense to have cutoff in the middle. The snap points need to work regardless of scroll input method.

    Tuesday, March 20, 2012 1:20 PM
  • Thanks for the feedback.  Currently this is by design but the product groups do review the forums.


    Jeff Sanders (MSFT)

    Wednesday, March 21, 2012 7:41 PM
    Moderator