Егор Кондратьев

canvas.addEventListener('mousemove', function(event) {
      let scaleFactor = 1150/plan.offsetWidth;
      event = {
        offsetX:event.offsetX*scaleFactor,
        offsetY:event.offsetY*scaleFactor
      }
        for(let i = arr.length - 1; i >= 0; i--) {
...

console.log(`Card ${key + 1} start!`);
el.classList.add('active');
console.log(`Card ${key + 1} end!`); // выполнится почти одновременно с предыдущими строками

console.log(`Card ${key + 1} start!`);
el.classList.add('active');
setTimeout(() => console.log(`Card ${key + 1} end!`), 1000);

el.addEventListener('transitionend', () => {
  console.log(`Card ${key + 1} end!`);
});

setTimeout(() => {
        console.log(`Card ${key + 1} start!`);
        const onTransitionEnd = () => {
          console.log(`Card ${key + 1} end!`);
          el.removeEventListener('transitionend', onTransitionEnd);
        }
        el.addEventListener('transitionend', onTransitionEnd); 
        el.classList.add('active');
      }, ms);

button.addEventListener('click', () => {
	cards.forEach((el, key) => {
		// console.log(`Animation: ${key} start!`);

			el.animate([
				{transform: "rotateX(0deg)"},
				{transform: "rotateX(180deg)"},
			], {
				duration: 1000,
				easing: 'linear',
				fill: 'forwards',
        delay: key*1000,
			})

		// console.log(`Animation: ${key} end!`);
	})
})

button.addEventListener('click', async () => {
  for (const el of cards) {
    await el.animate([
      { transform: 'rotateX(0deg)' },
      { transform: 'rotateX(180deg)' },
    ], {
      duration: 1000,
      easing: 'linear',
      fill: 'forwards',
    }).finished;
  }
});

let tab1 = document.querySelector('#tab1');
let tab2 = document.querySelector('#tab2');
let tab3 = document.querySelector('#tab3');


let clearAll = function(){
  [].forEach.call(document.getElementsByClassName('tab__btn'),(el) => {
      el.classList.remove('active');
  });
  tab1.classList.remove('active');
  tab2.classList.remove('active');
  tab3.classList.remove('active');
}

let london = document.querySelector('#london').onclick = function () {
  clearAll();
	this.classList.toggle('active');
	tab1.classList.toggle('active');
  
  
}

let tokyo = document.querySelector('#tokyo').onclick = function () {
  clearAll();
	this.classList.toggle('active');
	tab2.classList.toggle('active');
}

let paris = document.querySelector('#paris').onclick = function () {
  clearAll();
	this.classList.toggle('active');
	tab3.classList.toggle('active');
}

@function percent-font-size($base) {
  @return $base / 16 * 100 + '%';
}

font-size: percent-font-size(16);