JS works before CSS MediaQueries

Question

I have a problem, I use Jquery.connections plugin which renders lines between elements and when elements change position on screen from desktop to mobile, lines draw faster than CSS media queries end work. I tried to use set timeOut it doesn't work also was an idea to delete lines and draw again, but the main problem is JS works faster than CSS. Maybe someone is faced with this problem?

jQuery(document).ready(function() {
  let done = false;
  const createNumber = (str) => Number(str.split('').filter(item => item === "." || !isNaN(Number(item))).join(''))

  window.addEventListener('scroll', function() {
    if ( pageYOffset > 50 && !done ) {
      done = true;
      if ($(window).width() < 421) {
        jQuery('#flexibility_image').connections({ to: '#mobile__flexibility_oval', 'class': 'connection revealator-fade revealator-delay6 revealator-once' });
        jQuery('#sustainability_image').connections({ to: '#mobile__sustainability_oval', 'class': 'connection revealator-fade revealator-delay2 revealator-once' });
        jQuery('#car_image').connections({
          to: '#mobile__car_oval',
          'class': 'connection car_mobile_border revealator-fade revealator-delay8 revealator-once',
        });
        document.querySelector('.car_mobile_border').style.height = createNumber(document.querySelector(".car_mobile_border").style.height)+20+"px";
        jQuery('#food_image').connections({ to: '#mobile__food_oval', 'class': 'connection revealator-fade revealator-delay4 revealator-once' });
        jQuery('#air_image').connections({ to: '#mobile__air_oval', 'class': 'connection revealator-fade revealator-delay4 revealator-once' });
        jQuery('#hand_image').connections({ to: '#mobile__hand_oval', 'class': 'connection revealator-fade revealator-delay8 revealator-once' });
      } else if ($(window).width() < 1025) {
        jQuery('#flexibility_image').connections({ to: '#tablet__flexibility_oval', 'class': 'connection revealator-fade revealator-delay3 revealator-once' });
        jQuery('#sustainability_image').connections({ to: '#tablet__sustainability_oval', 'class': 'connection revealator-fade revealator-delay1 revealator-once' });
        jQuery('#car_image').connections({ to: '#tablet__car_oval', 'class': 'connection revealator-fade revealator-delay4 revealator-once' });
        jQuery('#food_image').connections({ to: '#tablet__food_oval', 'class': 'connection revealator-fade revealator-delay2 revealator-once' });
        jQuery('#air_image').connections({ to: '#tablet__air_oval', 'class': 'connection revealator-fade revealator-delay2 revealator-once' });
        jQuery('#hand_image').connections({ to: '#tablet__hand_oval', 'class': 'connection revealator-fade revealator-delay4 revealator-once' });
      } else {
        jQuery('#flexibility_image').connections({ to: '#main__flexibility_oval', 'class': 'connection revealator-fade revealator-delay6 revealator-once' });
        jQuery('#sustainability_image').connections({
          to: '#main__sustainability_oval',
          'class': 'connection revealator-fade revealator-delay2 revealator-once',
        });
        jQuery('#car_image').connections({ to: '#main__car_oval', 'class': 'connection revealator-fade revealator-delay8 revealator-once' });
        jQuery('#food_image').connections({ to: '#main__food_oval', 'class': 'connection revealator-fade revealator-delay4 revealator-once' });
        jQuery('#air_image').connections({ to: '#main__air_oval', 'class': 'connection revealator-fade revealator-delay4 revealator-once' });
        jQuery('#hand_image').connections({ to: '#main__hand_oval', 'class': 'connection revealator-fade revealator-delay8 revealator-once' });
      }

      document.querySelector(".building").addEventListener("resize", () => {
        jQuery('#flexibility_image').connections('update');
        jQuery('#sustainability_image').connections('update');
        jQuery('#car_image').connections('update');
        jQuery('#food_image').connections('update');
        jQuery('#air_image').connections('update');
        jQuery('#hand_image').connections('update');
      });
    }
  });

  window.onresize = () => {
    if ($(window).width() < 1024) {
      jQuery('#flexibility_image').connections('update');
      jQuery('#sustainability_image').connections('update');
      jQuery('#car_image').connections('update');
      jQuery('#food_image').connections('update');
      jQuery('#air_image').connections('update');
      jQuery('#hand_image').connections('update');
    } else {
      let oldLines = document.querySelectorAll('.connection');
      oldLines.forEach( e => e.remove() );
      setTimeout(() => {
        jQuery('#flexibility_image').connections({ to: '#main__flexibility_oval', 'class': 'connection revealator-fade revealator-delay6 revealator-once' });
        jQuery('#sustainability_image').connections({
          to: '#main__sustainability_oval',
          'class': 'connection revealator-fade revealator-delay2 revealator-once',
        });
        jQuery('#car_image').connections({ to: '#main__car_oval', 'class': 'connection revealator-fade revealator-delay8 revealator-once' });
        jQuery('#food_image').connections({ to: '#main__food_oval', 'class': 'connection revealator-fade revealator-delay4 revealator-once' });
        jQuery('#air_image').connections({ to: '#main__air_oval', 'class': 'connection revealator-fade revealator-delay4 revealator-once' });
        jQuery('#hand_image').connections({ to: '#main__hand_oval', 'class': 'connection revealator-fade revealator-delay8 revealator-once' });
      }, 500);
    }
  };
});