Уменьшение и увеличение текста с одной точки

Question

Я пытаюсь сделать анимацию. Суть анимации в том, что при прокрутке вниз текст уменьшается, а если вверх - увеличивается. И при прокрутке вниз он должен оставаться неизменным. Но у меня проблема: при увеличении и уменьшении масштаба текст не привязан к какой-либо точке, поэтому проще прикрепить gif

Пример того, как должно быть: Click Пример того, что происходит на самом деле: Щелкните

HTML

<div class="main__logo">
     <h1 id="logo">
          Fashion
     </h1>
</div>

CSS

.main__logo {
  font-size: 200px;
  position: fixed;
  margin-top: 0;
}
.main__logo .logo__sticky {
  position: fixed;
  font-size: 24px;
  margin-top: -80px;
}
#logo {
  -webkit-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease;
}

jQuery

$(window).scroll(function () {
  if ($(this).scrollTop() > 80) {
    $("#logo").addClass("logo__sticky");
  } else {
    $("#logo").removeClass("logo__sticky");
  }
});

Answer 1

Я предлагаю вам использовать animate , это упростит вам анимацию каждого кадра, как в видео.