@ITemka

Почему не получается анимировать сайт с помощью min.wow.js и animate.css?

Для простых анимаций элементов на своем сайте я, недолго думая, решил использовать animate.css с min.wow.js на пару, чтобы анимация начинала играть только тогда, когда пользователь до нее доскроллит. В самом начале страницы (в теге head) подключаю оба инструмента - min.wow.js и animate.css:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>


Далее инициилизирую min.wow.js (все также в теге head):
<script>
    new WOW().init();
</script>


И вот, когда уже все необходимые манипуляции завершены, добавляю к анимируемому элементу класс wow и нужный класс анимации:
<div class="wow animate__animated animate__fadeInLeft">
	<p class="name">тестовый элемент</p>
	<p class="presents">тестовый элемент</p>
</div>


Как сразу элемент пропадает. То есть изначально он был на странице (и остается на ней, если проверить в инспекторе кода), но потом словно исчезает. И, самое интересное, отдельно только animate.css использовать получается, анимации применяются, но чуть только добавляю класс wow (потому что какой толк от анимации, если она проигрывается прежде чем пользователь до нее дойдет), элемент пропадает со страницы.

И по видео на YouTube пробовал делать - перепробовал несколько разных способов и вариаций, и с искусственным интеллектом советовался (представленный здесь способ он мне подсказал), все без толку. Подскажите, в чем может быть проблема)
  • Вопрос задан
  • 209 просмотров
Пригласить эксперта
Ответы на вопрос 1
Kiriniy
@Kiriniy
Графический и веб-дизайнер
Если речь об этом wow, то там написано:

animateClass: Class name that triggers the CSS animations (’animated’ by default for the animate.css library)


Предположу, что раньше в animate.css главным классом был animated, а теперь стал animate__animated и вам надо либо запускать wow с дополнительной настройкой, либо пересобрать css.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы