Плавное смешивание и замена картинок в галерее JavaScript

У меня есть гелерея с картинками, над ней несколько ссылок при клике на которых меняется содержание

У меня это реализовано при помощи data-*, но при такой реализации я не могу сделать требуемые эффекты плавного исчезновения ненужных и появления нужных слайдов слайдов. Задача: При клике на ссылку не актуальные слайды из прошлой ссылки плавно изчезают, остаются только актуальные, плюс они встают, тоже плавно, на место исчезнувших слайдов.

Я очень топорно реализовал это, оно работает, но выглядит ужасно. Подскажите как я могу оптимизировать код. Возможно есть какое то решение от jQuery.

/**================================================================================*/
/**-----------------------------PORTFOLIO GALLERY----------------------------------*/
/**================================================================================*/
const portfolioItem = document.getElementsByClassName('portfolio-item')
const portfolioAll = document.getElementById("portfolio-all");
const portfolioLayout = document.getElementById("portfolio-layout");
const portfolioApps = document.getElementById("portfolio-apps");
const pointer = document.getElementsByClassName('pointer')
const portfolioFilter = document.getElementById('filter')

portfolioFilter.addEventListener('click', function (event) {
        if(event.target === portfolioApps) {
            portfolioItem[1].style.opacity = '0';
            portfolioItem[1].style.transform = 'scale(0)';
            portfolioItem[1].style.transition = '.5s';

            portfolioItem[2].style.opacity = '0';
            portfolioItem[2].style.transform = 'scale(0)';
            portfolioItem[2].style.transition = '.5s';

            portfolioItem[3].style.opacity = '0';
            portfolioItem[3].style.transform = 'scale(0)';
            portfolioItem[3].style.transition = '.5s';


            portfolioItem[5].style.opacity = '0';
            portfolioItem[5].style.transform = 'scale(0)';
            portfolioItem[5].style.transition = '.5s';


            portfolioItem[0].style.opacity = '1';
            portfolioItem[0].style.transform = 'scale(1)';
            portfolioItem[0].style.display = 'block';
            portfolioItem[0].style.transition = '.5s';

            portfolioItem[4].style.display = 'block';
            portfolioItem[4].style.transform = 'scale(1)';
            portfolioItem[4].style.opacity = '1';
            portfolioItem[4].style.transition = '.5s';
            portfolioItem[4].style.top = '0';

        }else if(event.target === portfolioLayout) {
            portfolioItem[0].style.opacity = '0';
            portfolioItem[0].style.transform = 'scale(0)';
            portfolioItem[0].style.transition = '.5s';

            portfolioItem[4].style.opacity = '0';
            portfolioItem[4].style.transform = 'scale(0)';
            portfolioItem[4].style.transition = '.5s';


            portfolioItem[1].style.display = 'block';
            portfolioItem[1].style.opacity = '1';
            portfolioItem[1].style.transform = 'scale(1)';
            portfolioItem[1].style.transition = '.5s';
            portfolioItem[1].style.top = '0';
            portfolioItem[1].style.left = '0';

            portfolioItem[2].style.display = 'block';
            portfolioItem[2].style.opacity = '1';
            portfolioItem[2].style.transform = 'scale(1)';
            portfolioItem[2].style.transition = '.5s';
            portfolioItem[2].style.top = '0';
            portfolioItem[2].style.left = '33.3319%';

            portfolioItem[3].style.display = 'block';
            portfolioItem[3].style.opacity = '1';
            portfolioItem[3].style.transform = 'scale(1)';
            portfolioItem[3].style.transition = '.5s';
            portfolioItem[3].style.top = '0';
            portfolioItem[3].style.left = '66.6638%';

            portfolioItem[5].style.display = 'block';
            portfolioItem[5].style.opacity = '1';
            portfolioItem[5].style.transform = 'scale(1)';
            portfolioItem[5].style.transition = '.5s';
            portfolioItem[5].style.top = '28%';
            portfolioItem[5].style.left = '0';

        }else if(event.target === portfolioAll) {
            portfolioItem[0].style.opacity = '1';
            portfolioItem[0].style.transform = 'scale(1)';
            portfolioItem[0].style.transition = '.5s';
            portfolioItem[0].style.display = 'block';
            portfolioItem[0].style.top = '0';
            portfolioItem[0].style.left = '0';

            portfolioItem[1].style.display = 'block';
            portfolioItem[1].style.opacity = '1';
            portfolioItem[1].style.transform = 'scale(1)';
            portfolioItem[1].style.transition = '.5s';
            portfolioItem[1].style.top = '0';
            portfolioItem[1].style.left = '33.3319%';

            portfolioItem[2].style.display = 'block';
            portfolioItem[2].style.opacity = '1';
            portfolioItem[2].style.transform = 'scale(1)';
            portfolioItem[2].style.transition = '.5s';
            portfolioItem[2].style.top = '0';
            portfolioItem[2].style.left = '66.3338%';

            portfolioItem[3].style.display = 'block';
            portfolioItem[3].style.opacity = '1';
            portfolioItem[3].style.transform = 'scale(1)';
            portfolioItem[3].style.transition = '.5s';
            portfolioItem[3].style.top = '51%';
            portfolioItem[3].style.left = '0';

            portfolioItem[4].style.display = 'block';
            portfolioItem[4].style.opacity = '1';
            portfolioItem[4].style.transform = 'scale(1)';
            portfolioItem[4].style.transition = '.5s';
            portfolioItem[4].style.top = '27%';
            portfolioItem[4].style.left = '33.3319%';

            portfolioItem[5].style.display = 'block';
            portfolioItem[5].style.opacity = '1';
            portfolioItem[5].style.transform = 'scale(1)';
            portfolioItem[5].style.transition = '.5s';
            portfolioItem[5].style.top = '58%';
            portfolioItem[5].style.left = '66.3338%';
        }
})

Прошу говной не кидаться, я только учусь.