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.

Answer 2

Just use a parallax scrolling type js library such as Skrollr. It's very easy to just make the lines a div with a background color, and then as you scroll the page the div grows in length.

Answer 3

The effect you are describing makes me think you are looking for something like flow or organization chart "connectors" which anchor arrows in a chart to glue points on each element. In more general graphics terminology these are likely just known as "line anchor points" or something similar.

JointJS is a great charting/drawing library for HTML5 and SVG that could make what you are doing fairly easy to do, but a simpler "CSS only" might be all you need. If you are you really looking to animate the image then the more sophisticated javascript library approach might be worthwhile. JointJS uses Raphael and Backbone.js so you get a lot of power tools in the box.

Answer 4

You can use this library for drawing SVG lines, its quite configurable and well documented. You basically need to specify your "From" and "To" elements and a line will connect them for you.

Then you can play with the line's stroke-dasharray and stroke-dashoffset properties on scroll to achieve effect of the line being drawn.

More of SVG animation here

I have used this approach and its quite cool looking, hope this helps

Answer 5

I think the best way to implement this depends greatly on what animation you're going for. To reproduce something similar as in your example, you could just stack different images (one for the crocodile and one for each component). Then as you scroll, you could change the z-index of the crocodile and use css animation to "wobble" the size of the element you just revealed. Put all of the images in one div together, to make sure they scale together and align nicely and you're done.

But for something else the work might be completely different of surprisingly similar, I really don't think there's one solution that fits all needs, except if you want to use the canvas as already suggested, but that depends on the complexity of the graphics you want to reveal.