How to make such parallax + svg?

Question

css

Good day! Tell me, what is the best plugin to use for such a parallax effect as here https://serioverify.com on the Our Process and Features tabs? Is it possible to make a similar effect with svg? Give some instructions, otherwise I did parallaxes, but simple ones. Maybe someone will throw a manual to read / see, I will be very grateful.

Answer 1

In general, I found 2 options for myself:
1) it will use the native scroll, so I quickly made an example of codepen.io/dark19/pen/ybboPw , but there is a problem that I did not figure out how to delay the section until the animation is complete, maybe someone knows, then tell me;
2) it will use a ready-made solution using the GSAP and ScrollMagic plugins (as I was told here , but the comment was deleted). This is the option I used. But you need to understand the documentation well.
It seemed to me easier to somehow do everything on jquery, but I didn’t have super tasks in the project there. I just needed to fill the svg line with color and, as it fills, animate html blocks in some areas (there is still a rake here: draw svg as a path because then you will not be able to fill it with color, you will need to use the stroke-dasharray and stroke properties -dashoffset). But I still used the plugins, although, I think, in vain, since I manually set the fill points of the svg and when the animation should occur, otherwise I don’t know how to calculate the degree of filling the line. Here's another example of GSAP + ScrollMagic, though here it is without effects codepen.io/dark19/pen/WjwoWm