Вот сайт:
В работе использовал wow.js + animate.css Добавлял к элементам и блокам эффект появления при скролинге. На десктопной версии всё в порядке, но при адаптации возникла проблема. Вот видео, в каких то местах происходят "прыжки вверх":
Подключение animate.css
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
Подключение wow.js
<script src="js/wow.min.js"></script>
Честно не знаю какой код привести в пример, в подключении ничего трудного нет и все отрабатывает. наверное вопрос к тем, кто с этим сталкивался. Ну вот к примеру код с формой которая точно прыгает:
<section class="stock"> <!-- Скидочка и заявка -->
<img src="img/image-background/background_three.png" alt="layout" class="image-background image-background_stock">
<div class="container">
<div class="stock__grid">
<div class="form form_stock wow animate__animated animate__fadeInLeft">
<h2 class="title title_fz45 title_fz45_white form__title">
ЗАЯВКА
</h2>
<div class="title title_fz22 form__subtitle">
Оставьте заявку прямо сейчас
</div>
<form action="mailer/smart.php" class="form__wrapper"> <!-- Заявка -->
<div class="form__select"> <!-- Услуга -->
<select name="service" id="service" class="title title_fz15 title_fz15_black">
<option>Ремонт ванных</option>
<option>Укладка плитки</option>
<option>Фотоплитка</option>
</select>
<label for="service" class="title title_fz14 title_fz14_montserrat">Услуга</label>
</div>
<div class="form__input"> <!-- Площадь + Арес -->
<div class="form__block">
<input name="address" type="text" class="title title_fz15 title_fz15_black" placeholder="г. Москва, ул. Перовская, д.1, к.2">
<label for="address" class="title title_fz14 title_fz14_montserrat">Адрес</label>
</div>
<div class="form__block form__block_width">
<input name="square" type="number" class="title title_fz15 title_fz15_black" placeholder="15 м²">
<label for="square" class="title title_fz14 title_fz14_montserrat">Площадь</label>
</div>
</div>
<div class="form__input"> <!-- Имя + Емаил -->
<div class="form__block">
<input name="email" type="email" class="title title_fz15 title_fz15_black" placeholder="example@inbox.ru">
<label for="email" class="title title_fz14 title_fz14_montserrat">Ваша почта</label>
</div>
<div class="form__block form__block_width">
<input name="name" type="text" class="title title_fz15 title_fz15_black" placeholder="Иван">
<label for="name" class="title title_fz14 title_fz14_montserrat">Ваше имя</label>
</div>
</div>
<div class="form__input"> <!-- Телефон + Кнопка -->
<div class="form__block">
<input name="phone" class="title title_fz15 title_fz15_black" required placeholder="+7 999 999-99-99">
<label for="phone" class="title title_fz14 title_fz14_montserrat">Ваш телефон</label>
</div>
<button type="submit" class="button button_form title title_fz15 title_fz15_font">
Отправить
</button>
</div>
<div class="form__input">
<input name="check" type="checkbox" checked required>
<div class="title title_fz15 title_fz15_font title_fz15_unset form__check">Согласие на обработку <a href="confidentiality.html">персональных данных</a></div>
</div>
</form>
</div>
<div class="stock__block"> <!-- Скидка -->
<div class="stock__wrapper">
<h2 class="title title_black title_fz80 title_fz80_media stock__title">
СКИДКА
</h2>
<div class="title title_gradient title_fz120 stock__procent">
10%
</div>
</div>
<div class="titile title_gradient title_fz30 title_fz30_media stock__subtitle wow animate__animated animate__fadeInRight">
При заказе с сайта
</div>
</div>
</div>
</div>
</section>
Пока искал решение, наткнулся на одну историю: Если прописать overflow-x: hidden; для всех элементов
* {overflow-x: hidden;}
То скролл получается плавным, все работает как надо, прыжков нет, но появляются полосы прокрутки в тех блоках/элементах, где происходят прыжки. Это наталкивает меня на мысли что дело в ширине, но как применить эту находку, я не знаю. Честно, очень хочу вникнуть и разобраться почему так происходит.