Как задать два разных действия при нажатии на кнопку, чтобы при первом нажатии выполнялось первое, при втором второе, при третьем снова первое и тд

У меня есть иконка бургер меню, при нажатии на него срабатывает плавная анимация (верхняя и нижняя полоска поворачиваются образуя крестик, средняя исчезает), мне нужно чтобы при следующем нажатии иконка так же плавно вернулась. Я реализовал это так

JS

let burger = document.querySelector('.burger-menu');
let burger2 = document.querySelector('.burger-menu.active');
let string1 = document.querySelector('.string-1');
let string2 = document.querySelector('.string-2');
let string3 = document.querySelector('.string-3');
let a = 1;
if (a == 1) {
  burger.onclick = function(){
    string1.classList.toggle('active');
    string2.classList.toggle('active');
    string3.classList.toggle('active');
    a = a + 1;
  }
}

if (a == 2) {
  burger2.onclick = function(){
    string1.classList.toggle('default');
    string2.classList.toggle('default');
    string3.classList.toggle('default');
    a = a - 1;
  }
}

CSS

    .string-1.active {
        transition: transform 0.5s ease-in-out;
        transform: translateY(11px) rotate(45deg);
    }

    .string-1.default {
        transition: transform 0.5s ease-in-out;
        transform: translateY(-11px) rotate(-45deg);
    }

    .string-3.active {
        transition: transform 0.5s ease-in-out;
        transform: translateY(-11px) rotate(-45deg);
    }

    .string-3.default {
        transition: transform 0.5s ease-in-out;
        transform: translateY(11px) rotate(45deg);
    }

    .string-2.active {
        transition: opacity 0.3s ease-in-out;
        opacity: 0;
    }
    .string-2.default {
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
    }

Когда я первый раз нажимаю на кнопку добавляется класс active и все нормально работает, но при втором нажатии просто убирается класс active и до класса default не доходит.