Як налаштувати анімації Elementor з урахуванням prefers-reduced-motion

Що таке prefers-reduced-motion і навіщо його враховувати

prefers-reduced-motion — це медіазапит CSS, який повідомляє, що в налаштуваннях пристрою користувач попросив зменшити кількість руху. Браузер передає цю інформацію сайту, а сайт може вимкнути або спростити анімації.

Це не означає, що потрібно повністю прибрати будь-які візуальні зміни. Зазвичай достатньо вимкнути декоративний рух: parallax, floating, масштабування під час наведення, довгі переходи, автоматичні слайди та ефекти появи. Зміна кольору, тіні або чіткий миттєвий стан hover часто залишається доречною.

Такий підхід покращує доступність і UX: користувач отримує той самий контент і функціональність, але без потенційно дискомфортного руху.

• prefers-reduced-motion працює на рівні налаштувань операційної системи або браузера;
• медіазапит не потребує JavaScript;
• правило потрібно застосовувати до всіх компонентів, де є рух, а не лише до одного hero-блоку;
• доступність не замінює перевірку продуктивності: надмірні анімації можуть уповільнювати сайт і для користувачів без цього режиму.

Як підготувати блоки в Elementor

Спочатку складіть список елементів, які мають анімацію. Перевірте hover-ефекти кнопок і карток, переходи кольору або тіні, появу блоків під час прокручування, parallax-фони, floating-ефекти та інші Motion Effects.

Для кожного контейнера, секції або віджета з рухом додайте спільний CSS-клас, наприклад animated-block. У Elementor клас зазвичай задається в розділі додаткових параметрів елемента, у полі CSS Classes. Назви та доступність окремих полів можуть відрізнятися залежно від конфігурації Elementor і теми.

Не додавайте цей клас до всього сайту без потреби. Якщо правило вимкне transition у великому контейнері, воно може зачепити вкладені кнопки, посилання та інші елементи, яким потрібен звичайний стан hover.

• додайте клас animated-block до карток, кнопок, секцій і контейнерів із рухом;
• перевірте також вкладені елементи, псевдоелементи та фонові ефекти;
• використовуйте зрозумілі назви класів, щоб через кілька місяців було легко знайти всі анімовані блоки;
• якщо сайт має багато компонентів, можна створити окремі класи для різних сценаріїв: animated-block, parallax-block, floating-element.

CSS для вимкнення transition та animation

Додайте CSS у Custom CSS Elementor, якщо ця можливість доступна у вашій конфігурації, або в інше централізоване місце для стилів теми. Правило нижче вимикає CSS-анімації та переходи в позначеному блоці й усіх його дочірніх елементах.

Використання !important тут виправдане: воно допомагає перекрити стилі окремих віджетів і глобальні правила Elementor. Водночас не варто застосовувати такий підхід до всіх елементів сторінки без класу, оскільки це може непередбачувано змінити інтерфейс.

@media (prefers-reduced-motion: reduce) {
  .animated-block,
  .animated-block * {
    animation: none !important;
    transition: none !important;
  }

  html {
    scroll-behavior: auto !important;
  }
}

Чому scroll-behavior потрібно задавати для html

Плавне прокручування зазвичай задається для документа через html, а не для конкретного блоку. Тому scroll-behavior: auto краще винести в окреме правило для html. Воно вимикає плавний перехід під час переходу до якоря або програмного прокручування.

Це правило не вимикає прокручування як таке — воно лише прибирає плавну анімацію. Користувач і надалі зможе переходити між секціями та користуватися якорями.

Якщо анімація змінює transform або opacity

Вимкнення animation і transition не завжди повертає елемент до початкового візуального стану. Наприклад, якщо блок постійно має transform: translateY(...) або opacity: 0, після вимкнення переходу він може залишитися зміщеним або невидимим.

У такому випадку додайте для reduced-motion фінальні статичні значення. Конкретні властивості залежать від вашої анімації.

@media (prefers-reduced-motion: reduce) {
  .animated-block,
  .animated-block * {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

Що робити з Elementor Motion Effects

Motion Effects можуть працювати складніше, ніж звичайний CSS hover. Parallax, scrolling effects, entrance animation і floating-ефекти можуть змінювати transform під час прокручування або запускатися через логіку Elementor. Одного правила для transition іноді недостатньо.

Для важливого контенту найнадійніший варіант — підготувати спрощене представлення без parallax, floating і scroll-анімацій. Воно має містити той самий текст, зображення та функціональність, але не залежати від руху.

Якщо на сторінці використовуються дві версії блока, потрібно подбати про доступність. Не залишайте одночасно два однакові заголовки, кнопки або посилання в дереві доступності. Приховуйте неактивну версію так, щоб скринрідер не читав дубль.

• анімаційний блок має клас animated-version;
• статичний варіант має клас reduced-version;
• за замовчуванням показується animated-version;
• у режимі reduced motion animated-version приховується, а reduced-version показується;
• перевірте, щоб прихований блок не залишався доступним для клавіатури та скринрідера.

.reduced-version {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .animated-version {
    display: none !important;
  }

  .reduced-version {
    display: block !important;
  }
}

Коли не потрібна окрема копія блока

Якщо ефект є лише декоративним і після його вимкнення контент виглядає нормально, краще залишити один блок. Це зменшує дублювання HTML і спрощує підтримку сторінки.

Окремий статичний варіант виправданий, коли анімація впливає на композицію, видимість або спосіб подання інформації, а просте скасування transform чи transition не дає коректного результату.

Перевірка роботи на сайті

Після додавання CSS перевірте не лише редактор Elementor, а опубліковану сторінку у звичайному та reduced-motion режимах. Редактор може показувати ефекти інакше, ніж фронтенд, а кешування здатне приховати зміни стилів.

У браузері можна перевірити медіазапит через DevTools: відкрийте інструменти розробника, знайдіть налаштування емуляції prefers-reduced-motion і перемкніть його на reduce. Назви цього пункту залежать від браузера.

Також корисно перевірити сторінку на реальному пристрої з активованим системним режимом зменшення руху. Особливу увагу приділіть меню, модальним вікнам, слайдерам, sticky-елементам, якірній навігації та формам.

• у режимі reduce не запускаються entrance, floating, parallax і scroll-анімації;
• вміст не стає невидимим через opacity або transform;
• кнопки та посилання залишаються доступними з клавіатури;
• не виникає горизонтального прокручування або стрибків макета;
• переходи до якорів відбуваються без плавної анімації;
• після вимкнення reduced motion звичайна версія сайту продовжує працювати коректно.

Поширені помилки під час налаштування

Найчастіша помилка — вимкнути лише transition, хоча ефект реалізований через keyframes або Motion Effects. Для повнішого покриття потрібно враховувати animation, transform, opacity і прокручування.

Інша проблема — додати CSS, але не очистити кеш. Після змін перевірте кеш плагіна оптимізації, CDN і браузера. Також переконайтеся, що стилі справді завантажуються на фронтенді.

Не слід приховувати важливу інформацію тільки для користувачів із reduced motion. Спрощена версія повинна зберігати зміст, навігацію та основні дії. Мета — прибрати рух, а не урізати функціональність.

Не покладайтеся лише на візуальну перевірку. Переконайтеся, що статичний блок не дублюється для скринрідера, а приховані кнопки не залишаються доступними при навігації клавішею Tab.

• не використовуйте prefers-reduced-motion як причину приховати контент;
• не додавайте !important до глобальних селекторів без обмеження класом;
• не вважайте, що вимкнення CSS автоматично зупиняє будь-який JavaScript-ефект;
• не забувайте про мобільне меню, слайдери та попапи — вони також можуть містити рух.