How would I smoothly move an element using Hammer.js and JQuery?

Question

I'm currently developing a web-app, that has to run on both computer systems and tablets. Possibly even smartphones. Now, the menus are on one page, horizontally next to each other. The idea is that you can switch menu by swiping the content, just like you can do on tablets and smartphones. Plus, there are buttons for computer users which will be used to switch menus.

Menu content will be loaded using JQuery's AJAX functions, and menu moving through JQuery's animate function.

Now I was wondering how I could make this animation properly. When swiping I would need to take speed, direction, and distance insto account. When clicking buttons, a static speed should be applied.

Anyone any ideas?

Answer 1

Customizing using hammer.js is very easy. If you just go through the examples given by them, it would give you a fair idea of the functionality. However, this example will give you a sense of how the transitions will be like.

If you insist on using the animate/hammer.js, this structure will help::

 $('#elementID').hammer().on('swipe', function(e){
    e.preventDefault();
   $('#your-content-ID').animate({
       opacity: 0.25,
       left: '+=50',
       height: 'toggle'

     }, 5000, function() {
        // Animation complete.
       });

    });