How could I smoothly move an element using Hammer.js and jQuery?

Question

I am currently developing a web application that should work on both computers and tablets. Maybe even smartphones. Now the menus are on one page, horizontally next to each other. The idea is that you can switch menus by navigating content, as you can do on tablets and smartphones. In addition, there are buttons for computer users that will be used to switch menus.

The contents of the menu will be loaded using the jQuery AJAX functions and the menu navigating through the jQuery animation function.

Now I was wondering how I can make this animation properly. When scrolling, I will need to take speed, direction and distance. When the buttons are pressed, static speed is applied.

Any ideas?

Answer 1

Setting up with hammer.js is very simple. Just looking at the examples he gives will give you an idea of ​​the functionality. However, this example will give you an idea of ​​what the transitions will look like.

If you insist on using the /hammer.js animation, 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. }); });