Drawing SVG with binding to page scrolling. How is it easier to implement?

Question

SVG

This is how it is on this site, transparallels.ru , only I need a dotted one and so that it ends in the right place, and as soon as the wheel turns, it starts to move smoothly again.
I'm thinking about using this plugin.
I just need the whole landing page.
Who did this, tell me how best to do it.

Answer 1

The most universal solution for this type of task is GSAP(DrawSVG plugin) + Scrollmagic.
https://greensock.com/drawSVG
scrollmagic.io
But just like on the site, you can do it in general through CSS animations with transition. There is no smooth drawing on the scroll, there is an animation starting from the scroll position.
The most poppy tutorial on how to animate a svg path at all:
https://css-tricks.com/svg-line-animation-works/
You can catch a position simply without libraries through scrollY, or again with Scrollmagic.