Почему анимации работают неправильно?

Question

[Andrew Foy]

Все работает но самой анимации не происходит
Подключил animate.css

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

внизу body подключил wow

<script src="js/wow.min.js"></script>
    <script>
      new WOW().init();
    </script>

Comments

[Валерий Воронков]

В коноли есть каккие-то ошибки?

[Владислав Лысков]

ну допустим ты его инициализировал, а дальше то что?

Answer 1

[Александр Талалаев]

WOW.js - после инициализации ищет элементы на страницы с классом 'wow' и применяет к ним анимацию появления. По умолчанию все с wow скрыты. А с помощью классов из animate.css вы сможете дополнительно указать тип анимации при появлении элемента.
Те в самом теле html файла, добавить элемент:

<div class="wow" >
Привет
</div>

После этого он будет не видим, пока пользователь не доскроллит до него.

Comments

[Andrew Foy]

я ставил классы но все равно не работает

<div class="wow fadeInRight"
Привет
</div>

[Дмитрий]

Для wow требуется подключение jquery.
Подключили?

[Andrew Foy]

Дмитрий, ааа, а как подключить?

[Дмитрий]

Arda4ek,
перед скриптом wow

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/wow.min.js"></script>

[Александр Талалаев]

Arda4ek, и нужно уменьшить версиюю animate до 3.7.2 ...
А лучше выкинуть этот wow и использовать AOS

[Andrew Foy]

Александр Талалаев,
в head прописал

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">

в конце body

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
       AOS.init();
    </script>

убрал wow увидев как работает AOS решил попробовать, но и он не работает.
Что я делаю не так?

[Дмитрий]

Arda4ek, для aos - animate, jquery не требуется

https://jsfiddle.net/bL5dq8jm/

[Andrew Foy]

Дмитрий, Спасибо большое! А еще допустил ошибку написав
data-aos="fade-right"
внутри
class