ramotion / aquarelle Goto Github PK

https://bl.ocks.org/mbostock/raw/4241134/d3.geom.contour.min.js is down, any backup link?

I saw in the thread on Product Hunt that you would consider packaging this for release on npm if enough users asked you to. I propose we use this issue to measure user interest in an npm package.

Hello,
the first time I took a look at this js it was awesome, now the static demo is scattering is there any issue? I was thinking on using it on one of my projects.
Thanks,F.

Hi @Juriv,
We are cdnjs team.we're going to host this library.
The git auto-update in cdnjs relies on git tags so that it can recognized the correct version and automatically update this repo.
Could you please add git tags for the repo? Thank you.

cdnjs/cdnjs#10310

Cloned the latest, and tried to run the example. Added the CDNs, installed the bower folder in the directory, but I get the following errors:

Uncaught TypeError: aquarelle.addEventListener is not a function at index.html:139:15

Aquarelle.js:103 Uncaught TypeError: d3.geom.contour is not a function
at Aquarelle.drawMaskImage (Aquarelle.js:103:35)
at Image.Aquarelle.self.mask.img.onload (Aquarelle.js:24:22)

The problem in examples/index.html is here:

var aquarelle = new Aquarelle(image, 'img/mask.png', {
    autoplay: true,
    loop: true
});

aquarelle.addEventListener('created', function() {
    var canvas = this.getCanvas();
    canvas.removeAttribute('style');
    image.parentNode.insertBefore(canvas, image.nextSibling);
    image.parentNode.removeChild(image);
});

Using VSCODE Go-Live, macos, installed bower with brew. Thoughts? Thanks for looking!

I see this doesn't seem to work with transparent PNG images? Are there any plans for the future to add PNG support or any way to get it working now?

Hello,

Loving this effect!

However i'm noticing a dramatic impact on performance in my site.
I just need to use it for the beginning intro, the effect is then removed and it is not needed again.

Despite removing the canvas and the animation having finished, performance of the whole site is permanently reduced. If I reload without this effect performance returns to its normal state.

For reference the canvas and relevant images are inside a React element (though the same is occurring when they're not) and the project is using Ruby on Rails. When i say removing the effect I am calling

ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).parentNode)
from inside the react element containing the canvas and aquarelle object. Thus the canvas is removed from the DOM.

Is there a way to use the aquarelle effect for the beginning and then completely remove it from memory? That is close any Three.js items, clear everything and effectively return the site to a state if the effect had never been run?

Thanks