Incorrect sequence of text output to the console with Event-transitionstart and transitionend, js

I haven't been able to solve one problem with my code for some time. I am making an application on cordova, and I, in the code, need to do the detection of the beginning of transition and its end, I do this using the transitionstart and transitionend events. I have a long code, so I will show you only the important things. Here is the main file main.js where the events are located:

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

Then I have a file animate.js in which the animation takes place: The function toLeft() moves the element to the left and changes its width, the function toRight() moves the element to the right and changes its width, and the last function first performs the function toLeft() and after 1.7 s performs the function toRight(). In the first and second functions, I pass values that determine how many pixels the element will move or change its width.

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);
}

In the css file, I added the transition: 1.7s all property to the animated element. Also in the file main.js I have an object to which I pass the values for the functions toLeft() and toRight(): When I pass only the value left the function toLeft() is executed, if I pass the value right the function toRight() is executed, and if I pass two values, the function toLeftAndRight() is executed.

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

When I call this object method, an animation is performed with the specified properties. As you can see, I passed two values, then the toLeftAndRight() function will be executed. Now the main thing is that after each call of this object with the method animate, the values of its last call are passed to the function save with the values left, right, and stored in localStorage:

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

Now, for what it is necessary - I will have quite a few such animations, since this can rather be called a game where you need to work mainly with text, and where this animation changes when you click. There is a function that counts clicks, and in accordance with a certain click, for example, click 41 (when the user already makes 41 clicks :D), changes the animation. If the user exited the app after, say, 41 clicks, then the values of the object with the animate method that should have been it will be executed only for the click, the data will be saved in localStorage, and when the user goes back, the corresponding animation will be performed in accordance with the last values recorded in localstorage. The problem is that the events transitionstart and transitionend:

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

Don't work like that. The console displays start when the animation started and end when it ended. I passed two values to an object with the animate method, the values are: left, right then I have the toLeftAndRight() function executed, that is, in the console should show me first start then end then again start and then end, so it happens, but when the user left, and then went back to the page, and the animation on which he stopped starts to run, the console writes start then start and then end and again end, and it should have been start -> end -> start -> end correctly. And this happens exactly when the function toLeftAndRight() is executed, when only toLeft() or toRight() is executed, there are no problems. I can't understand why this is happening at all. the sequence start->start->end->end is exactly when the animation is executed according to the values from localSrorage, should it be start->end->start->end or am I wrong? I tried to explain everything well and chose the most important parts of the code, I hope someone knows what I was wrong, I will be very grateful if someone helps me, it is very important to me. Just in case, I'll show you how I perform the animation according to the values from Localstorage (When the user goes back to the page):

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