В общем я отыскал для себя 2 варианта:
1) это воспользоватся нативным скроллом вот я примерчик быстро наваял
codepen.io/dark19/pen/ybboPw , но есть проблемка в том, что я не придумал как задерживать секцию до полного выполнения анимации, может кто знает, то подскажитет;
2) это воспользоватся готовым решением с помощью плагинов GSAP и ScrollMagic (как мне
тут подсказали, но удалили коммент). Вот этим вариантом я и воспользовался. Но нужно хорошо разобраться в документации.
На jquery мне показалось проще как-то все сделать, но у меня не было там сверхзадач в проекте. Мне нужно было просто заполнять свг линию цветом и по мере её заполнения в некоторых участках анимировать блоки html(тут ещё есть грабли: рисуйте svg как path потому, что потом вы не сможете заполнить его цветом, там нужно будет использовать свойства stroke-dasharray и stroke-dashoffset). Но я все таки воспользовался плагинами, хотя, я думаю, зря, так как я вручную прописывал точки заполнения свг и когда должна произойти анимация, по другому я не знаю как вычислить степень заполнения линии. Вот вам ещё пример GSAP + ScrollMagic правда
тут он без эффектов
codepen.io/dark19/pen/WjwoWm