I'm messing around with hammer.js and want to swipe 100 images that are stacked on one another. Basically, like a stack of cards. I'm having trouble targeting the child element of the #wrap and why my swipe animation has such huge lag after it has been swiped.
Below is the html and js.
html:
<body>
<div id="wrap">
<div class="bioImg">
<img src="imgs/1.jpg" alt="biography image">
</div>
<div class="bioImg">
<img src="imgs/2.jpg" alt="biography image">
</div>
<div class="bioImg">
<img src="imgs/3.jpg" alt="biography image">
</div>
<div class="bioImg">
<img src="imgs/4.jpg" alt="biography image">
</div>
<div class="bioImg">
<img src="imgs/5.jpg" alt="biography image">
</div>
<div class="bioImg">
<img src="imgs/6.jpg" alt="biography image">
</div>
<div class="bioImg">
<img src="imgs/7.jpg" alt="biography image">
</div>
<div class="bioImg">
<img src="imgs/8.jpg" alt="biography image">
</div>
</div>
</body>
JS:
// Create a manager to manager the element
var hamMangr = new Hammer.Manager(wrap);
// Create a recognizer
var Swipe = new Hammer.Swipe();
// Add the recognizer to the manager
hamMangr.add(Swipe, { direction: Hammer.DIRECTION_HORIZONTAL });
hamMangr.on('swipeup swiperight swipedown swipeleft', function (e) {
console.log(e);
console.log(e.target);
console.log(e.type);
tl.add(slideOutAnim(e.target, e.type, 1))
});
