---
name: scroll-animation-must-not-encode-quantity
description: "Анимация, привязанная к скроллу (animation-timeline: view()), не должна масштабировать элемент, длина которого кодирует число — недокрашенный отрезок это не анимация, а неверные данные на экране"
metadata: 
  node_type: memory
  type: feedback
  originSessionId: b11e39bd-4f6f-47c9-ba7b-680ccf041a5b
  modified: 2026-08-06T12:21:36.412Z
---

Привязывая набор полосы к прокрутке через `animation-timeline: view()`, помни: если длина полосы **что-то означает** (число источников, процент, сумма), то на любой промежуточной фазе на экране стоит **неверное число**, а не «эффект появления».

**Why:** 2026-08-06, ВакХантер: три мини-шкалы тарифов (5 / 12 / 20 источников) получили `animation-range: entry 20% cover 45%`. На скриншоте секции диапазон **Pro оказался короче, чем у Standard** — карточка Pro ниже, её прогресс меньше. Формально «анимация работает», фактически страница врала о тарифе. Плюс засечка края (`.dial-stop`) позиционируется через `left` и не масштабируется — она разъезжалась с концом полосы.

**How to apply:** для количественных элементов заканчивать набор в самом начале входа (`animation-range: entry 0% entry 45%`), чтобы полоса была полной задолго до того, как её можно прочитать. Если нужен длинный эффект — анимировать `opacity`, а не `scaleX`/`width`: прозрачность ничего не кодирует. И проверять **картинкой**: грепом и замерами это не ловится, я нашёл только на скриншоте. Родственно [[deployed_is_not_running]] и [[ui_position_not_presence]].

**Продолжение 06.08.2026: `animation-timeline: view()` пришлось снять целиком.** Даже с коротким
`animation-range` осталось два изъяна, и оба про правду. Во-первых, view() поддержан не везде, а под
`@supports` в остальных браузерах правило не применялось вовсе. Во-вторых — хуже — привязка к прокрутке
двусторонняя: **при движении ВВЕРХ отрезок опустошался обратно**, и вверху страницы все три шкалы
показывали ноль источников. Владелец так их и увидел: «статичные шкалы, непонятно что показывают».

Замена: состояние по умолчанию — **полное и верное** (без JS тоже), а класс набора вешает
IntersectionObserver и только тем элементам, которые ещё не видны (иначе видимый мигнёт
«полный → пустой → полный»). Обратного хода нет. Тот же приём применён к «выдвижению ящика» Автеро.

**И вторая половина той же истории:** шкала была ещё и непонятна — что она измеряет, было написано
в левой колонке, в 500 px от неё. Добавлена подпись у края отрезка («5 из 20»). Количественная графика
обязана нести свою единицу рядом с собой, иначе она декорация.
