How to implement animation of one element as the page scrolls?

Question

css

I can't attach the customer's layout to the question, but I'll try to explain the point.
Along the entire landing page, a fireproof (bickfordoff) cord with a fuse at the very beginning is drawn. The task is that this fuse, as the page scrolls, moves along this very cord (with all its bends, because it does not lie there evenly). In the direction of what solutions to dig? wow.js which is used for scroll animation doesn't seem to help here. Can you please tell me how to implement something like this? Thank you.

Answer 1

The task is divided into two:
1. Animate the line itself
2. Move the fire along it
SVG suggests itself for the first task ( an article about dotted wow effects ). Well, the solution of the second follows from the first, it is enough to google "moving an object along the path" or something like that. We get something like this (the code is a bit strange, I turned another example upside down, but the idea should be clear):
It remains only to attach the monitor to draw fire, but that's another question.

Answer 2

https://www.youtube.com/watch?v=fR0tHI0nFYk

Answer 3

Look towards GSAP and/or ScrollMagic