Анимация срабатывает раньше нужного, а по нескольким CSS-значениям трудно понять почему. Брамус выпустил Scroll-Triggered Animations Debugger — расширение с отдельной панелью в Elements.
Оно показывает контейнер прокрутки, анимируемый элемент и объект, относительно которого считается триггер. На миникарте видны диапазоны активации; их можно менять прямо в панели. Индикатор показывает, активен ли триггер сейчас.
Есть поддержка
scroll(), view() и элементов с position: sticky.У инструмента есть ограничения: относительные единицы отображаются как вычисленные пиксели, а выбор элемента внутри iframe мешает получить нужные данные. Поэтому для примеров CodePen автор рекомендует отдельный Debug View.