Multiple instances of flubber.js

[jacoblindgren]

Hello. Firstly, thanks very much for the work you've done to create flubber.js. It works fantastically and is a huge help.

I'm wondering how to run multiple instances of flubber.js on one DOM. I apologize beforehand if this is very obvious, but I've attempted a few things and struggled a bit and haven't been able to identify a way to allow this to happen. It appears the code identifies anything that is a path and removes each one except the first one. I tried to assign the different paths a class and use the d3 selector (i.e. d3.selectAll("path").filter(".nameOfClass"); with no luck. If you could provide any advice or suggestions it would be greatly appreciated. Thanks for your time.

[veltman]

Hi there - I'm not sure exactly what you mean by "multiple instances," if you mean transforming multiple paths independently of each other, you can certainly do that.

To clarify, Flubber itself has no knowledge of <path> elements and doesn't manipulate them, it only provides string values that you can apply to paths as needed.

For example, if you had a page with two path elements on it:

<path id="horse" />
<path id="zebra" />

and you wanted to turn one from a triangle into a horse, and the other from a triangle into a zebra, you could do something like:

// Your start/end path strings
var triangle = "M....Z",
    horse = "M...Z",
    zebra = "M....Z";

var triangleToHorse = flubber.interpolate(triangle, horse),
    triangleToZebra = flubber.interpolate(triangle, zebra);

d3.select("#horse")
  .transition()
  .attrTween("d", function() { return triangleToHorse; });

d3.select("#zebra")
  .transition()
  .attrTween("d", function() { return triangleToZebra; });

Or, slightly more concise:

var triangle = "M....Z",
      horse = "M...Z",
      zebra = "M....Z";

d3.selectAll("#horse, #zebra")
  .data([horse, zebra])
  .transition()
  .attrTween("d", function(animal) {
    return flubber.interpolate(triangle, animal);
  });

If this doesn't clear it up and you can post your full non-working code, I'll try to take a look.