Are there any good integrations for snapping? about doormat HOT 10 CLOSED

Hey @HongPong

That's actually a pretty neat idea 😎

I'm not sure of something that would integrate off the top of my head but I'm happy to implement something to do this. I don't think it will be that hard to do this 😄

in the meantime, do you have any examples of the behaviour you would like to see? Just so that I can make sure I put together something close but at the same time configurable/generic.

@jh3y

from doormat.

I think this has the closest to what I am looking for . http://projects.lukehaas.me/scrollify/

Just a basic thing to kind of snap page sections into place. Ideally if it still works in the older IE versions (we are working with an audience that may be in older computer labs or similar) or really just degrades gracefully then we are in good shape. Thanks so much for quick consideration!

from doormat.

From looking at that, are you wanting to programatically say "scroll to this section"?

I think I interpreted it as when you are scrolling, snap to the panel that has majority share of the screen if within a certain threshold. This style, I have nearly implemented 😄

If it's a programmatic way of doing it, using jQuery you could get the offsetHeight of the sections and then animate the scroll to of the body to the correct scroll position(I haven't tested this yet)

p.s any transitions will of course degrade to just being instant snaps in older browsers.

@jh3y

from doormat.

The option to programmatically scroll to a section is good. Yes that is the general interpretation, the idea is someone on a PC or mobile device is close to a threshold and it snaps. This way, as they try to get to slide 2, then they don't go 80 pixels too far or too short; thus, the system would tend to pop fully from one slide to the next.

Also if possible, if it has a lot of momentum from a finger flick, that would be enough to bring it to the next section. (which might be what you mean - I am still getting the nuances of UX in scroll-flicking motions). I feel like the Luke Haas library has a pretty good feeling of flicking to the next slide. ( here is a counter example - i think feels too jittery http://guidobouman.github.io/jquery-panelsnap/ )

from doormat.

Hmm. I feel like there are different sets of behavior for the different scenarios.

By default, snapping to the closest panel edge that currently possesses majority share of the screen real estate is easiest to implement and I have pretty much got that in place.

The next I guess is the concept of snap travelling. Flick past enough and you should go forwards/backwards. This may be possible from experimenting with the snap implementation I've put in place and setting it at larger thresholds.

I think scroll to programatically can already be done without the need for any extra work but maybe some aid in the documentation would be useful. Each panel in the list is assigned a positioning property. This can be read and then the body scrolled to. As mentioned previously, I'll need to give this a test out 😄

@jh3y

from doormat.

Wow this is cool, I will try it out next day or 2. Thanks so much!!

from doormat.

No worries! Hopefully it can help you out 😺

It's deployed on the demo page currently. Will most likely need a little experimentation with options to get the desired behavior 😎

May require some further work, but it's a start! Just wary of code expanding.

@jh3y

from doormat.

My designer asked me to get it so that after you scroll like 5% down on panel 1, it would kick right into panel 2. She would prefer that it not snap back to panel 1 if you scroll 4% down, it should just stay where it is. If there is a way to get this using the existing code that is great. Thanks so much!

from doormat.

Hey @HongPong

With the existing code. This wouldn't be possible. I think whereas currently it is more like "snap to viewport", you require "snap travel". This would require a similar logic to check for the snapping region but also require an additional flag to say "if outside that region, move to the next/previous slide, whichever is closest".

This might not take too much alteration but will indeed require some alteration to detect the correct threshold/trigger the right behavior.

UPDATE 17/06 :: It's a WIP, but I've implemented snap travelling. It currently only works concretely when scrolling down although I've had an idea about how to fix this. Will deploy and release.

@jh3y

from doormat.

Hey @HongPong.

I've implemented "snap travelling" now to a standard that I'm a bit more pleased with.

The following configuration could be appropriate;

const myDoormat = new Doormat({
  debounce: 150,
  snapping: {
    viewport : false,
    travel      : true,
    threshold: 10,
    duration  : '.25s'
  }
});

This would make the panel snap to the next/previous once you've gone past 10% of the viewport in the appropriate direction. I think you mentioned 5% in an example so changing threshold to 5 might be better.

Hope that helps 😃 Thanks for helping me to improve the project!

@jh3y

from doormat.