Неправильная последовательность вывода текста в консоль с Event - transitionstart и transitionend, js

Я уже некоторое время не могу решить одну проблему с моим кодом. Я делаю приложение на cordova, и мне, в коде, нужно сделать обнаружение начала transition и его конец, я делаю это с помощью события transitionstart и transitionend. Код у меня длинный, по этому я покажу только важное. Вот главный файл main.js где находятся события:

element.addEventListener('transitionstart', function(){
      console.log('start');
});
        
element.addEventListener('transitionend', function(){
      console.log('end');
});

Потом у меня есть файл animate.js, в котором происходит анимация: Функция toLeft() передвигает элемент в лево и меняет его ширину, функция toRight() передвигает элемент в право и меняет его ширину, а последняя функция сначала выполняет функцию toLeft() а через 1.7s выполняет функцию toRight(). В первую и вторую функцию я передаю значения, от которых зависит на сколько пикселей элемент подвинется или поменяет свою ширину.

function toLeft(left){
         element.style.width = innerWidth + left + 'px';  
         element.style.marginLeft = 0 + 'px'; 
}
function toRight(right){
         element.style.width =  innerWidth + right + 'px';
         element.style.marginLeft = -right + 'px';
}
function toLeftAndRight(){
         setTimeout(()=>{ toLeft(); }, 0);
         setTimeout(()=>{ toRight(); }, 1700);
}

В файле css я добавил к анимированному элементу свойство transition: 1.7s all. Так же в файле main.js у меня есть объект, которому я передаю значения для функций toLeft() и toRight(): Когда я передам только значение left выполнится функция toLeft(), если передам значение right выполнится функия toRight(), а если передам два значения то выполнится функция toLeftAndRight().

obj.animate({
    right: 200,
    left: 300
});

Когда я вызываю этот метод объекта, выполняется анимация с указанными свойствами. Как видите, я передал два значения, тогда выполнится функция toLeftAndRight(). Теперь главное - после каждого вызова этого объекта с методом animate, значения именно его последнего вызова передаются в функцию save со значениями left, right, и сохраняются в localStorage:

function save(left, right){
  localStorage.setItem('animate', JSON.stringify({left: left, right: right}));
}

Теперь, для чего это нужно - у меня таких анимаций будет не мало, так как это скорее можно назвать игрой, где нужно работать в основном с текстом, и где при клике эта анимация меняется. Eсть функция которая считает клики, и в соответствии с определенным кликом, например кликом 41 (когда пользователь делает уже 41 клик :D), меняет анимацию. Если пользователь вышел из приложения допустим, после 41 клика, то значения объекта с методом animate которые должны были выполнится только для клика 41 сохранятся в localStorage, а когда пользователь зайдет назад, то в соответствии с тем, какие последние значения были записаны в localstorage, выполнится соответственная анимация. Проблема в том, что события transitionstart и transitionend:

element.addEventListener('transitionstart', function(){
  console.log('start');
});
    
element.addEventListener('transitionend', function(){
  console.log('end');
});

работают не так. В консоль выводится start когда анимация началась и end когда она закончилась. Я передал два значения в объект с методом animate, значения: left, right тогда у меня выполняется функция toLeftAndRight(), то есть, в консоль мне должно вывести сначала start потом end потом снова start и потом end, так и происходит, но когда пользователь вышел, а за тем зашел обратно на страницу, и анимация на которой он остановился начинает выполнятся, то консоль пишет start потом start а вот за тем уже end и опять end, а правильно должно было start -> end -> start -> end. И это происходит именно когда выполняется функция toLeftAndRight(), когда выполняется только toLeft() или toRight() проблем нет. Я вообще не могу понять, почему такая последовательность start->start->end->end именно когда анимация выполяется в соответствии со значениями из localSrorage, должно же быть start->end->start->end или я ошибаюсь? Я пытался всё хорошо объяснить и выбрал самые важные участки кода, надеюсь кто-то знает в чем я ошибся, буду очень благодарен если кто-то поможет, мне это очень важно. Eщё на всякий случай, покажу как я выполняю анимацию в соответствии со значениями из Localstorage (Когда пользователь заходит назад на страницу):

 let obj = JSON.parse(localStorage.getItem('animate'));
 obj.animate({
   left: obj.left,
   right: obj.right
 });