JS Good way to make marking effect with line

Question

There is an effect of pointing to a special element of image with line. See example of crocodile at http://snapsvg.io/.
When the image appears at first there is no any pointing with lines:

Then after scrolling appears lines with hints:

I know there is https://github.com/julianlloyd/scrollReveal.js and a lot of other js libraries for effect of appearing.

The question is how to make this lines, place them at the exact point on top of usual image (not SVG) and animate lines on scrolling?

Would be great to know the name of this approach/effect (what to google) and see reviews on good/bad experience, or js libraries.

Update: want to see resolved issue with image resizing and exact pointing,

In most cases, see example at http://www.sitmed.com.br/produto?id=2, image has fixed isze and is not scalable, this will not work for big or small screens. I think it is possible to write scaling library in javascript, using svg/canvas or even plain div. Otherewise points will jump on image scaling.

Answer 1

To make these lines and place them at exact position:

The easiest is to use canvas or svg. Here are a few links to do that.

Drawing lines on html page

Drawing arrows on an HTML page to visualize semantic links between textual spans

Placing the lines is easy if you're using canvas. If you are using images for lines, you can place these lines with respect to the big crocodile. Not a big deal.

---

Animate lines on scrolling

A good place to start with knowing about animations is to learn any animation framework. I would suggest Greensock Animation Platform(GSAP). It is open source and also well supported. They have good tutorials and docs for beginners. You can animate in a very abstract manner using GSAP. Rapheal.js is also good for animating svg images. As for as scrolling is concerned, you can find many plugins including the one which is mentioned in the question.