Резкая анимация на iOS и Android

Я сделала анимацию при клике, и на компьютере она выглядит хорошо. Проблема в том что на iOS и Android девайсах анимация очень резкая, и выглядит рвано. Очень долго искала способы это исправить, но до сих пор не смогла найти решения. Вот мой JS, полностью код можно увидеть на jsfiddle.

$('.project-image').on('click', function() {
var $this = $(this);
var img = $(this).attr('id');
var minusLeft = $(this)[0].offsetLeft - 8;
var minusTop = $(this)[0].offsetTop - 80;
$('.show-description').fadeOut(600, function () {
    $('.hide-description').fadeIn(600);
});
$('.flex-container img').not('#' + img).animate({
    opacity: 0,
}, 200, "linear", function() {
  $this.css({
    top:'-'+minusTop+'px',
    left:'-'+minusLeft+'px'
    })
setTimeout(function() {
    $('.flex-container img').not('#'+img).hide();
    $this.css("position", 'static');
    $('.flex-container').css('flex-flow', 'column wrap');
    $('.'+img+'-text-block').show();
    $('.'+img+'-text-block').animate({
        opacity:1
      }, 100)
}, 600)
});
})
$('.hide-description').on('click', function() {
$('.hide-description').fadeOut("slow", function () {
    $('.show-description').fadeIn(1000);
});
$('[class*="-text-block"]').hide()
$('.flex-container').css('flex-flow', 'row wrap')
$('.flex-container img').css({
    position: 'relative',
    top:0,
    left:0
})
$('[class*="-text-block"]').css('opacity', '0');
$('.flex-container img').animate({
    opacity: 1,
}, 400)
$('.flex-container img').show()
})