Margin instead of translate

[Tomino2112]

Hi, It would be great to get an option if to use translate on margin. The purpose of this is that in responsive web app different behavior on desktop and mobile is required.

While on mobile it s great that the snap content is pushed to the right and snap left drawer opened up (on the most of the screen really), on desktop it would be better if the drawer "shrinks" (rather than "pushes") the snap content.

I have done really quick test and it would be pretty easy to achieve that. On mobile you can keep using translate as it is, on desktop you can use margin-left:266px; on snap content and it works exactly the same.

The problem at the moment is that all class triggers (add/remove) are tied to the translate value and therefore if you use margin-left while keeping the translate value to 0 effectively the body class trigger doesn't work and therefore the whole thing doesn't work.

So proposed changes would be:

• Not to change style of elements directly but control it through css style file by adding/removing classes (not that important)
• Adding option to snapjs something like "effect" with possible values "push", "shrink"
• Improving the script not to rely on translate value deciding if the snapper is opened or closed.

The mobile/desktop detection is better to be left out for developers to take care of it by themselves.

Unfortunately I don't have time at the moment to code that myself and create pull request. Hope it make sense though

[Tomino2112]

Ok, so in the end for the sake of getting the functionality I did update the script quickly. Please see it here: https://github.com/Tomino2112/Snap.js/blob/develop/snap.js It is just a very quick work, doesn't support right snapper, but it is beginning :)

[frankie-loves-jesus]

Hi! Nice work, but using a mobile menu for desktop sounds pretty pointless to me.

[Tomino2112]

Well of course I am not using it as a menu, but I have a list of the item that slides from left. I am using it in a web app. So you have from left sliding list of items, and on the right detail about the item you select from the left (very simplified)