Кратко

  • Первый публичный проект W3C Scroll-linked Animations за октябрь 2022 года разделил продвижение контейнера прокрутки и путь отдельного элемента через видимую область.
  • В проектах 2023 года под названием Scroll-driven Animations описаны ScrollTimeline, ViewTimeline и animation-timeline: ход эффекта можно привязать к месту на странице вместо секунд на часах.

В длинном материале диаграмма появляется эффектно: столбцы подрастают по очереди за две секунды. Читатель замечает спорную цифру ниже, прокручивает вверх и встречает готовую картинку. Представление состоялось один раз, занавес опущен. Но статья устроена в пространстве, по которому можно ходить туда и обратно. Почему постановщиком графика назначили часы, которые признают только движение вперёд?

Первый публичный проект W3C от 25 октября 2022 года назывался Scroll-linked Animations. Он предложил две разные меры. Шкала продвижения прокрутки следит за положением прокручиваемого контейнера от начала до конца его пути. Шкала продвижения вида следит за конкретным элементом: как он входит в видимую область, пересекает её и выходит. Индикатор чтения наверху статьи ориентируется на весь путь. Иллюстрация в середине текста — на собственное появление перед глазами. Это два счётчика с разными объектами измерения.

Браузер может вычислить оба значения и предоставить их анимации. Сайт выбирает, что двигать, на каком участке пути и ради какого смысла. Остановился читатель — остановился эффект; вернулся — эффект может пойти назад. Такое управление выглядит естественным лишь тогда, когда автор честно ответил на вопрос, зачем картинке вообще двигаться. Полоса прокрутки держит палочку, но партитуру ей не доверили.

Проект от 8 декабря 2022 года развил связи через CSS. scroll() обращается к продвижению прокрутки; именованные шкалы и шкалы видимости связывают эффект с подходящим источником. Есть прозаичное ограничение: контейнер без прокручиваемого переполнения может дать неактивную шкалу. Нельзя устроить кульминацию на половине пути, если пути нет. Лифт, стоящий на первом этаже без шахты, к третьему не приедет даже под музыку.

В проекте от 28 апреля 2023 года появилось название Scroll-driven Animations. Оно точнее описывает замысел: положение ведёт эффект, а не просто запускает секундный фейерверк. Модель выражается средствами CSS и интерфейсов Web Animations. Анимация занимает диапазон движения по странице. Индикатор может наполняться по мере чтения, фотография — проясняться, пока её рамка пересекает экран. Обратная прокрутка возвращает последовательность к предыдущему шагу.

Текст от 6 июня 2023 года различает ScrollTimeline и ViewTimeline как источники продвижения и связывает их с animation-timeline. Если перепутать источники, индикатор всего материала станет зависеть от входа одной фотографии, а фотография будет пытаться измерять весь материал. Прежде чем спрашивать, насколько далеко зашла сцена, надо узнать, чью дорогу мы меряем.

История публикаций W3C соединяет первый открытый проект 2022 года с правками 2023-го. Сквозная идея проста: браузер измеряет общую для всех позицию, а редакция решает, какое значение ей придать. Повторяющееся объяснение графика помогает тому, кто перечитывает. Заголовки, скачущие при каждом движении колёсика, превращают репортаж в ярмарку. Часы освободили кресло режиссёра, но вакансия не подразумевала приглашения клоуна.

Хорошая диаграмма умеет повторить важный шаг, когда к нему возвращаются. Темп спектакля теперь в руках зрителя.