Как сделать плавное появление текста при скроле?

Question

[Emil7676]

Сделал чтобы при скроле появлялся текст, но почему то не работает. Подскажите пожалуйста что не так?

<div style="margin-left: -110px;">
<div class="element-animation">
<strong>Идеология</strong>. Этот круг золотого цвета, потому что мы
провозгласили честность новым золотом и заявили,
что наше слово стоит дороже, чем металл.
</div>
</div>

.element-animation {
  margin: 2rem 0;
  font-size: 3rem;
  
  /* Скроем элемент в начальном состоянии */
  opacity: 0;
  transform: translateY(20px);
}

.element-animation.element-show {
  opacity: 1;
  transition: all 1.5s;
  transform: translateY(0%);
}

function onEntry(entry) {
  entry.forEach(change => {
    if (change.isIntersecting) {
     change.target.classList.add('element-show');
    }
  });
}

let options = {
  threshold: [0.5] };
let observer = new IntersectionObserver(onEntry, options);
let elements = document.querySelectorAll('.element-animation');

for (let elm of elements) {
  observer.observe(elm);
}

Comments

[Noder SS]

Лол, я едентичное видео смотрел, с element-animation. У меня все работало, может скинуть код?

Answer 1

[GeminiX]

вроде всё работает, залейте всё в песочницу и ссылку прикрепите

Comments

[Emil7676]

Возможно это у меня, выдаёт такую ошибку :error parsing error unexpected token
https://imgur.com/a/OIeeDhX

[GeminiX]

случаем это не в Internet Explorer такая ошибка и приходит ли там entry? Ругается на стрелочную функцию судя по всему

[Emil7676]

Александр, Не знаете как исправить?

[GeminiX]

Emil7676, стрелочные функции переделать на обычные function(){} или настраивать сборку с транспилингом js