Если вкратце, то, примерно так:
- Ловите событие скрола на странице
- При скроле смотрите координаты, где сейчас пользователь.
- Если он попал в нужный диапазон (доскролил до нужного места, но не проскролил его), то
- проверяете сколько он проскролил уже с нужного места и проскрола
- в зависимости от процента проскрола изменяете процентное состояние анимации.
Например, нужный блок на "глубине" 600px от верхней границы сайта. Высота секции с анимацией - 500px.
При скроле смотрим, сколько пользователь проскролил. Если >= 600px, то смотрим на текущий скрол (например, 850px) это значит, что нужно анимацию поставить на 50% ( 850 - 600 = 250. 250 - это половина 500, т. е. половина секции с анимацией проскролена)
Я очень надеюсь, что объяснил понятно))
Возможно, есть библиотеки для делегирования анимациями в таких кол-вах. Я не искал таких.
В любом случае, не так страшно, как кажется, хотя заморочиться придётся. Особенно, над оптимизацией. У меня, к сожалению, на сайте по вашей ссылке неприятно тормозило.