Closed ohmycode closed 10 years ago
Hi Jacob, really great tool you're sharing here :+1: I just felt the need to snap the panel after a fast swipe, to make it feel more natural.
<!DOCTYPE HTML> <html lang="en-US"> <head> <title>Snap.js</title> <meta http-equiv="x-ua-compatible" content="IE=edge" /> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-touch-fullscreen" content="yes"> <link rel="stylesheet" type="text/css" href="../../snap.css" /> <link rel="stylesheet" type="text/css" href="../assets/demo.css" /> <script src="hammer.js"></script> <style> #content { width: 500px; margin-left: 291px; } #panel-left { width:300px; height: 100%; background: red; } </style> </head> <body> <div id="panel-left"></div> <script type="text/javascript" src="../../snap.js"></script> <script type="text/javascript"> var snapper = new Snap({ element: document.getElementById('panel-left'), hyperextensible: false, tapToClose: false, maxPosition: 0, minPosition: -200, }); var lastPosition = { x : 0, y :0 }; var panelDrag = Hammer(document.getElementById('panel-left'), { drag_lock_to_axis: true }); panelDrag.on("dragend", function(e) { e.preventDefault(); if (lastPosition.x > e.gesture.deltaX) { if (e.gesture.velocityX > 0.1) { setTimeout(function(){ snapper.expand('right'); },10); console.log("go"); } } else if(lastPosition.x < e.gesture.deltaX) { if (e.gesture.velocityX > 0.1) { setTimeout(function(){ snapper.expand('left'); },10); } } }); </script> </body> </html>
I used hammer.js to get the swipe velocity.
This looks a bit hackish, so it would be great to see this implemented the "right" way in Snap.js some day!
I will be looking into adding velocity support for the v2.0 version of Snap.js without the use of Hammer.js, thanks!
Hi Jacob, really great tool you're sharing here :+1: I just felt the need to snap the panel after a fast swipe, to make it feel more natural.
I used hammer.js to get the swipe velocity.
This looks a bit hackish, so it would be great to see this implemented the "right" way in Snap.js some day!