Scroll-driven animations во всех трёх движках: Firefox 159 включил анимации по прокрутке по умолчанию

27 октября 2026 года вышел Firefox 159, и в нём scroll-driven animations включены по умолчанию. Анимации, которые идут не по времени, а по прокрутке страницы, теперь описываются чистым CSS и работают во всех трёх браузерных движках: Chromium, WebKit и Gecko. Для большинства сайтов JavaScript-библиотеки ради «появления при скролле» больше не нужны.

Chrome поддерживает эту технологию с 2023 года, Safari — с версии 26, а Firefox до сих пор держал её за флагом. Теперь пробел закрыт, и для команд, которые ведут разработку сайтов, анимации на прокрутке перестают быть экспериментом с фолбэками: их можно закладывать в макет и вёрстку как обычную часть интерфейса.

Кроме того, в релизе появились scoped custom element registries для веб-компонентов и изменилась работа HTML Sanitizer API. Ниже — что именно вошло в Firefox 159, что это меняет для frontend-разработки и как перейти с JS-анимаций без регрессий.

Что изменилось в Firefox 159 для веб-разработчиков

• Scroll-driven animations по умолчанию. Свойства animation-timeline, scroll-timeline, view-timeline и функции scroll() и view() работают без флага: анимацию можно привязать к прогрессу прокрутки контейнера или к тому, как элемент проходит через видимую область.
• Scoped custom element registries. Конструктор CustomElementRegistry() создаёт отдельный реестр для shadow-дерева. Два веб-компонента с одинаковым именем тега теперь могут жить на одной странице, не конфликтуя.
• HTML Sanitizer API. Element.setHTML() и родственные методы вычищают нежелательные элементы и атрибуты прямо во время разбора разметки, а не после построения DOM-дерева.
• WebGL. Добавлены расширения EXT_clip_control и EXT_texture_mirror_clamp_to_edge, а EXT_texture_norm16 включено по умолчанию в WebGL 2.
• DevTools. В веб-консоли можно повторно объявлять переменные через let, const и class без ошибки.
• Удалено. Старый синтаксис masonry (grid-template-rows: masonry, masonry-auto-flow), который был включён только в Nightly. На смену ему пришёл grid lanes — display: grid-lanes.

Почему поддержка во всех движках важнее самой функции

Анимации по прокрутке существуют давно, но до сих пор их почти всегда делали через JavaScript: обработчики scroll, IntersectionObserver или библиотеки вроде GSAP ScrollTrigger. Такой код выполняется в основном потоке и конкурирует с остальной логикой страницы, поэтому на слабых телефонах анимации дёргаются, а отзывчивость интерфейса проседает.

CSS-вариант браузер может обсчитывать вне основного потока. WebKit, например, с Safari 26.4 выносит такие анимации на поток композитора. Пока один из трёх движков не поддерживал технологию, командам приходилось держать два пути: CSS для одних браузеров и JS-фолбэк для других. С Firefox 159 второй путь становится не обязательным, хотя пользователи со старыми версиями браузеров никуда не денутся.

Что это значит для сайтов и интерфейсов

Индикаторы прогресса чтения, параллакс, «выезжающие» карточки, липкие заголовки с трансформацией, раскрытие блоков при попадании во вьюпорт — всё это теперь описывается несколькими строками CSS. Меньше JavaScript означает меньший бандл и меньше работы в основном потоке, а это напрямую влияет на INP, одну из метрик Core Web Vitals.

Для дизайнеров это тоже сигнал: анимации на скролле можно закладывать в прототип как штатный приём, а не как «дорогую фичу под вопросом». Но злоупотреблять ими не стоит: движение, завязанное на прокрутку, утомляет и мешает людям с вестибулярными нарушениями.

Как перейти с JS-анимаций без регрессий

1. Проведите инвентаризацию. Найдите в проекте анимации на scroll-событиях и IntersectionObserver, которые только меняют transform и opacity: их проще всего перенести на CSS.
2. Оберните новый код в проверку. Используйте @supports (animation-timeline: view()), чтобы браузеры без поддержки показывали статичное состояние, а не сломанную анимацию.
3. Уважайте настройки пользователя. Отключайте движение через @media (prefers-reduced-motion: reduce).
4. Анимируйте дешёвые свойства. transform и opacity не вызывают перерасчёт макета; анимация height или top съест выигрыш.
5. Проверьте на реальных устройствах. Safari 26.5 исправлял ошибки в диапазонах и прогрессе view timeline, поэтому тестируйте в актуальных версиях всех трёх браузеров, а не только в Chrome.

Часто задаваемые вопросы

Можно ли удалять JS-фолбэк прямо сейчас? Если анимация декоративная — да, при условии что без неё страница остаётся рабочей. Если от анимации зависит понимание контента, оставьте статичный вариант через @supports, пока доля старых браузеров в вашей аналитике не станет пренебрежимой.

Заменяют ли scroll-driven animations библиотеки вроде GSAP? Для типовых эффектов — да. Сложные сценарии с покадровой синхронизацией, физикой или управлением из кода по-прежнему удобнее делать библиотеками.

Когда выйдет следующая версия Firefox? По данным Mozilla, Firefox 160 запланирован на 10 ноября 2026 года. Подробнее о том, из чего состоит клиентская часть сайта, — в нашем материале о frontend-разработке.

Источники

• MDN — Firefox 159 release notes for developers, 27 октября 2026 (первоисточник).
• Mozilla — Firefox 159.0 Release Notes, 27 октября 2026.
• GIGAZINE — Firefox 159 official version released, 28 октября 2026.
• WebKit — WebKit Features in Safari 26.0 (поддержка scroll-driven animations в Safari).