Swipe and drag

, , 16/03/2018

This snippet was used for making a circle slideshow with a bubble following the circle path. Useful to make some swipe / drag animations



indicator__wrapper.on('mousedown touchstart',function(event){
    event.preventDefault();

    $('#circleslider').on('mousemove touchmove',function(event){

        event.preventDefault();

        // get circle offset position and height / 2
        var parent_offset = $("#circleslider .circle").offset(); // position()
        var parent_height = $("#circleslider .circle").height() / 2 ;

        // get mouse position relative to parent
        var relX = event.pageX - parent_offset.left ;
        var relY = event.pageY - parent_offset.top ;

        // convet position to degrees
        var r = relY / parent_height * 180;
        var deg = Math.floor(r);
         deg = (deg - 180) /3.3;

        // show hide case name relative to bubble position
        if ( deg < -10) {
            case_stories.removeClass('active');
            $slider.find("li:nth-child(1) .case" ).addClass('active');
            title_1.find('.undercolor').addClass('transit');
            title_2.find('.undercolor').removeClass('transit');
            title_3.find('.undercolor').removeClass('transit');
            circle.find('img').removeClass('active');
            circle.find("img:nth-child(1)").addClass('active');
        }

        else if ( ( deg >= -10) && (deg <= 4) ) {
            case_stories.removeClass('active');
            $slider.find("li:nth-child(2) .case" ).addClass('active');
            title_1.find('.undercolor').removeClass('transit');
            title_2.find('.undercolor').addClass('transit');
            title_3.find('.undercolor').removeClass('transit');
            circle.find('img').removeClass('active');
            circle.find("img:nth-child(2)").addClass('active');
        }

        else if ( deg > 4)  {
            case_stories.removeClass('active');
            $slider.find("li:nth-child(3) .case" ).addClass('active');
            title_1.find('.undercolor').removeClass('transit');
            title_2.find('.undercolor').removeClass('transit');
            title_3.find('.undercolor').addClass('transit');
            circle.find('img').removeClass('active');
            circle.find("img:nth-child(3)").addClass('active');

        }

        // remove transition duration and move bubble with indicator
       indicator__wrapper.css({transition : "transform  ease",  transform : "rotate( " + - deg + "deg)" });
       indicator.css({ transition : "transform  ease", transform : "rotate( " + deg + "deg)"} );

    });
});
$('#circleslider').on('mouseup touchend',function(event){
    event.preventDefault();
    $(this).off('mousemove').off('touchmove');
    // re enable transition duration for bubble
    indicator__wrapper.css({transition : "transform 300ms ease"});
    // remove transition duration for arrow
    indicator.css({transition : "  "});

    // replace bubble on mouse / touch leave
    if( $slider.find("li:nth-child(1) .case" ).hasClass('active') )  {
        indicator__wrapper.css({ transform : 'rotate(25deg)'});
        indicator.css({ transform : 'rotate(-25deg)'});
    }

    else if( $slider.find("li:nth-child(2) .case" ).hasClass('active') )  {
        indicator__wrapper.css({ transform : 'rotate(0)'});
        indicator.css({ transform : 'rotate(0)'});
    }

    else if( $slider.find("li:nth-child(3) .case" ).hasClass('active') )  {
        indicator__wrapper.css({ transform : 'rotate(-21deg)'});
        indicator.css({ transform : 'rotate(21deg)'});
    }

});