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

Question

[ITemka]

Для простых анимаций элементов на своем сайте я, недолго думая, решил использовать 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 пробовал делать - перепробовал несколько разных способов и вариаций, и с искусственным интеллектом советовался (представленный здесь способ он мне подсказал), все без толку. Подскажите, в чем может быть проблема)

Comments

[Модератор]

Не надо ставить как можно больше тэгов. Лучше оставить один, но конкретный, с которым проблема.
См.п.3.1 Регламента. Также обратите внимание на п.3.4

Answer 1

[Кирилл Никитин]

Если речь об этом wow, то там написано:

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

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

Comments

[ITemka]

либо запускать wow с дополнительной настройкой

Это как? Все возможные (по крайней мере известные) настройки я уже проводил, тоже не получается.

либо пересобрать css

В каком смысле? Заново задать все стили? Думаете, там что-то мешает? Честно, тоже задумывался над этим, но что бы это могло быть?

[Кирилл Никитин]

ITemka, я же привёл ссылку на документацию https://wowjs.uk/docs

wow = new WOW({animateClass: 'animate__animated'})
wow.init();

[ITemka]

Кирилл Никитин, Я понял. Попробовал - не работает. Очень странно, сколько я смотрел видео и сколько читал статьи, везде сделано по-одинаковому и у всех все работало, хотя всего того, что вы мне сейчас подсказали сделать, они не делали. Почему, интересно, у меня такие проблемы?

[Кирилл Никитин]

ITemka, ну кстати я смотрю у них в доках в html класс не ставится, то есть инициализация как я написал и так в html должно быть:

<div class="wow animate__fadeInLeft">
...
</div>

[ITemka]

Кирилл Никитин, К сожалению по-прежнему либо пропадает элемент, либо wow не выполняет свою работу и анимацию срабатывает преждевременно.

Благодарю за помощь! Не знаю, что еще сможет помочь. но буду продолжать искать варианты

[Кирилл Никитин]

ITemka, сделайте codepen

[Кирилл Никитин]

ITemka, попробовал, у меня всё работает, даже без доп настроек. Проверьте консоль ещё на ошибки, перезагрузите страницу без кэша и всё таки попробуйте воспроизвести свою проблему на codepen.