Максим

let list = $('.class1');
for(let i = 0; i < list.length; i++) {
 if(list.eq(i).hasClass('class2')) {
    console.log(i);
    break;
 }
}

let list = $('.class1');
for(let i = 0; i < list.length; i++) {
 if(list[i].className.includes('class2')) {
    console.log(i);
    break;
 }
}

$('.class1').each((index, item) => {
 if(item.className.includes('class2')) console.log(index)
} );

const elems = [...document.querySelectorAll('.class1')];
const index = elems.findIndex(n => n.classList.contains('class2'));

const elems = document.querySelectorAll('.class1');
let index = elems.length;
while (--index >= 0 && !elems[index].matches('.class2')) ;

const index = Array.prototype.indexOf.call(
  document.querySelectorAll('.class1'),
  document.querySelector('.class2')
);

clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

const $el = $('.banner');
const baseWidth = $el.width();

$(window).scroll(function() {
  $el.width(baseWidth + $(this).scrollTop());
});

const el = document.querySelector('.banner');
const baseWidth = el.offsetWidth;

document.addEventListener('scroll', () => {
  el.style.width = `${baseWidth + document.documentElement.scrollTop}px`;
});

let state = true;

document.querySelector('button').addEventListener('click', e => {
  state = !state;

  document.querySelectorAll('circle').forEach((n, i, a) => {
    setTimeout(() => {
      n.classList.toggle('st0', state);
      e.target.disabled = (state ? a.length - i : i + 1) !== a.length;
    }, (state ? a.length - i : i) * 3);
  });
});

let state = true;
const button = document.querySelector('button');
const circles = document.querySelectorAll('circle');

button.addEventListener('click', () => {
  state = !state;
  toggleCircle(0);
});

function toggleCircle(i) {
  if (i < circles.length) {
    setTimeout(() => {
      const index = state ? circles.length - i - 1 : i;
      circles[index].classList.toggle('st0', state);
      button.disabled = i !== circles.length - 1;
      toggleCircle(i + 1);
    }, 3);
  }
}

let state = true;
const circles = document.querySelectorAll('circle');

document.querySelector('button').addEventListener('click', function() {
  this.disabled = true;
  state = !state;

  let i = 0;
  const intervalID = setInterval(() => {
    const index = state ? circles.length - i - 1 : i;
    circles[index].classList.toggle('st0', state);
    if (++i === circles.length) {
      this.disabled = false;
      clearInterval(intervalID);
    }
  }, 3);
});

.ribbon {
  ...
  background: #36499A;
  -webkit-clip-path: polygon(0% 0%, 100% 0, 75% 50%, 100% 100%, 0 100%, 25% 50%);
   clip-path: polygon(0% 0%, 100% 0, 75% 50%, 100% 100%, 0 100%, 25% 50%);
}

<div class="ribbon">
  <div class="bg">
    <svg viewBox="0 0 400 200" preserveAspectRatio="none">
      <path fill="#36499A" d="M 0,0 400,0 350,100 400,200 0,200 50,100 z"></path>
    </svg>
  </div>
  <div class="inner">
    Lorem ipsum dolor sit amet.
  </div>
</div>

.bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

svg {
  width: 100%;
  height: 100%;
}

$base-delay: 100ms;
@for $i from 0 through 400 {
  .item#{$i} {
    animation-delay: $base-delay + $i;
    animation-name: myanimation
  }
}
@keyframes myanimation { .... }