Slowing down Hammer.js?

Question

JavaScript

Written using Hammer.js version 1.0.5 slider following the example of codepen.io

Everything works fine, but there is a slight brake (noticeable in the video) when scrolling, it slows down a little at the edges. I noticed that Hammer.js just doesn't work at this point. Hammer js actions started to be displayed in the console (event output, event name). When Drag back and forth in the center, everything works fine, but when I slide to another (just when I drag to the edge) a certain interval of pixels, Hammer.js does not work there. Video example. What can be wrong? Example

video Here is the code

var self = this,
                container    = $('.works'),
                panes        = $(".work-item"),
                pane_width   = container.width(),
                pane_count   = panes.length,
                current_pane = 1,
                transition   = 600,
                fps          = 60,
                drag         = 0;

            /* Анимация объектп */
            function setContainerOffset(percent, event, animate) {

                var current_page = $(event.currentTarget),
                    prev_page    = current_page.prev(),
                    next_page    = current_page.next();

                /* Анимация при прекрашении перетаскивания */
                if (animate){
                    current_page.addClass("animate");
                    next_page.addClass("animate");
                    prev_page.addClass("animate");
                } else {

                    if (current_page.hasClass('animate') || next_page.hasClass('animate') || prev_page.hasClass('animate')){
                        current_page.removeClass("animate");
                        next_page.removeClass("animate");
                        prev_page.removeClass("animate");
                    }
                }

                /* Значения */
                var real_percent = percent <= -100 ? -100 : percent >= 100 ? 100 : percent,
                    next_scale,
                    next_opacity,
                    next_tranf_rotate,
                    current_opacity,
                    prev_percent;

                if (event.gesture.direction === 'left'){
                    prev_percent = (percent - 100);
                    next_scale   = Math.abs(((real_percent / 100) * 0.10)- 0.90);
                    next_opacity = Math.abs(((real_percent / 100) * 0.67) - 0.33);
                    next_tranf_rotate = ((real_percent / 25)) + 4;

                    /* Трансформация объектов */
                    current_page.css("transform", "translateX("+ percent +"%)");
                    next_page.css("opacity", next_opacity);
                    next_page.css("transform", "perspective(500px) translateX(-"+ next_tranf_rotate +"%) scale("+ next_scale +") rotateY(-"+ next_tranf_rotate +"deg)");

                    if (current_page === 1){
                        prev_page.css("transform","translateX("+ prev_percent +"%)" );
                    }

                    /* Стилизация  */
                    current_page.css('opacity', 1);

                } else if (event.gesture.direction === 'right' && current_pane !== 1){
                    current_opacity = Math.abs((((100 - real_percent ) / 100) * 0.67) + 0.33);
                    next_scale   = Math.abs((((100 - real_percent ) / 100) * 0.10) + 0.90);
                    next_tranf_rotate = ((real_percent / 25));
                    prev_percent = (100 - percent);

                    /* Трансформация объектов */
                    prev_page.css("transform", "translateX(-"+ prev_percent +"%)");
                    current_page.css("opacity", current_opacity);
                    current_page.css("transform", "perspective(500px) translateX(-"+ next_tranf_rotate +"%) scale("+ next_scale +") rotateY(-"+ next_tranf_rotate +"deg)");


                    /* Блокируем предыдушию страницу */
                    next_page.removeClass('visible');
                    //current_page.css('opacity', 1);

                } else if (event.gesture.direction === 'right' && current_pane === 1){
                    current_page.css("transform", "translateX("+ percent +"%)");
                    next_page.removeClass('visible');
                }
            }

            /* Методы Вперед/Назад */
            this.next = function(event, hide){
                if (current_pane >= pane_count){
                    this.showPane(0, event, true);
                } else {
                    this.showPane(-100, event, true);
                    current_pane++;
                    container.addClass('active');

                    if (hide){
                        var current_page = $(event.currentTarget),
                            prev_page    = current_page.prev(),
                            next_page    = current_page.next();

                        setTimeout(function (){
                            if (current_pane > 1){
                                current_page.removeClass('visible');
                                prev_page.removeClass('visible');
                            } else {
                                current_page.removeClass('visible');
                            }
                            container.removeClass('active');
                        }, transition);
                    }
                }
            };
            this.prev = function(event, hide){
                if (current_pane <= 1){
                    this.showPane(0, event, true);
                } else {
                    container.addClass('active');
                    var current_page = $(event.currentTarget),
                        prev_page    = current_page.prev(),
                        next_page    = current_page.next();

                    this.showPane(100, event, true);
                    current_pane--;

                    if (hide){
                        setTimeout(function (){
                            current_page.removeClass('visible');
                            container.removeClass('active');
                        }, transition);
                    }
                }
            };

            // Отображение слайдов
            this.showPane = function(index, event, animate){
                setContainerOffset(index, event, animate);
            };

            panes.hammer({
                dragLockToAxis: true,
                prevent_default: true,
                stop_browser_behavior: true,
                drag_min_distance: 0
            }).on("release dragleft dragright swipeleft swiperight", function (ev){

                ev.gesture.preventDefault();

                var current_page = $(ev.currentTarget),
                    prev_page    = current_page.prev(),
                    next_page    = current_page.next();

                switch (ev.type){
                    case 'dragright':
                    case 'dragleft':

                        // Первая страциа пропадает при слайде со второй
                        if (ev.type === 'dragleft' && current_pane > 1 ){
                            prev_page.removeClass('visible');
                            next_page.addClass('visible');

                        } else if (ev.type === 'dragleft' && current_pane === 1){
                            next_page.addClass('visible');

                        } else if (ev.type === 'dragright' && current_pane > 1) {
                            prev_page.addClass('visible');
                        }

                        /* Тач действия */
                        var drag_offset = ((100/pane_width) * ev.gesture.deltaX);

                        // Тормозить на первой и последней панели
                        if((current_pane == 1 && ev.gesture.direction == "right") || (current_pane == pane_count && ev.gesture.direction == "left")) {
                            drag_offset *= .10;
                        }

                        setContainerOffset(drag_offset, ev);

                        break;

                    case 'swipeleft':
                        self.next(ev, true);
                        ev.gesture.stopDetect();
                        break;

                    case 'swiperight':
                        self.prev(ev, true);
                        ev.gesture.stopDetect();
                        break;

                    case 'release':

                        // more then 50% moved, navigate
                        pane_width = $('.works').width();
                        if(Math.abs(ev.gesture.deltaX) > pane_width / 3) {
                            if(ev.gesture.direction == 'right' ) {
                                self.prev(ev, true);
                            } else {
                                self.next(ev, true);
                            }
                        } else {
                            self.showPane(0, ev, true);

                            if (ev.gesture.direction === 'left'){
                                container.addClass('release');
                                setTimeout(function (){
                                    container.removeClass('release');
                                    next_page.removeClass('visible');
                                }, transition);

                            } else if (ev.gesture.direction === 'right'){

                            }
                        }
                        break;
                }
            });

Answer 1

most likely because of the most "powerful" slide