ку, все зависит от уровня владения DOM, варианта как минимум два: хуяк-хуяк и в продакшин, либо написать свой компонент-класс для работы с подобными графическими решениями: входными параметрами для котрого будет положение блоков-зон при доскроливания до которых будет запускаться дочерний фукцнионал-анимация/callback-функции, в зависимости от количества нужных действий.
То есть у нас есть
1. timeline/scrollHeight(scrollWidth) по необходимости.
2. доскролили до конфигурационной точки (скажем первые 500 пикселей), запустили callback или callback_stack как душа пожелает
3. в зависимости от поведения юзера и результа callback решаем что делать дальше, в текущем примере скролим страницу далее.
П.С. подразумевается, что event.stopEventPropagation и event.returnValue=false должны быть освоены :)
ПС. ну это если есть желание постигать дзень и писать все самому, либо юзать готовые жучеродные решения, а потом в будущем "suffer" :)))