Как оптимизировать jQuery и CSS - нервные переходы прокрутки

Question

Я не нашел здесь ответа, который бы исправил мое решение -

Недавно я реализовал на своем личном сайте несколько функций jCuery addClass & removeClass, которые запускаются при появлении элемента. У меня есть CSS, установленный на размер в пикселях, который помещает его за пределы экрана, и когда элемент прокручивается до, к элементу добавляется класс, который возвращает его на экран.

Я не получаю никаких ошибок JS в консоли, и все мои изображения сжаты. Не уверен, что может быть причиной, но это выглядит довольно грубо. Любые советы будут удивительными.

Вот сайт - Встроенная ссылка

Пример функции jQuery

  $(window).scroll(function() {
    var sT = $(this).scrollTop();
    var sB = sT + $(window).height();
    var tag = $(".outer-box-l-1");

    if ($(tag).position().top < sB) {
      $(tag).addClass("visible");
    } else {
      $(tag).removeClass("visible");
    }
  });

CSS

.outer-box-l-1 {
  display: inline-block;
  margin: 0px 8px 40px 8px;
  width: 35%;
  max-width: 1200px;
  list-style: none;
  text-align: center;
  z-index: unset;
  opacity: 0;
  transform: translate(-850px, 0);
  transition: all 0.5s;
}

.outer-box-l-1.visible {
  transform: translate(0, 0);
  opacity: 1;
}