making keyshapejs code smaller

[pixelpaulaus]

hello,
I am using it for a very basic animation, mostly just postion, opacity, fillcolor and size changes.
I am needing to make all the files as small as possible. Would you recommend a way to remove unused functions from the main keyshapejs file?

[Pixofield]

I don't think there's any easy way to remove unused functions. The only way would be to try to remove unused API methods, such as cancel() or markers(), and see if it still works. Then, you would also have to minify the library yourself.

If you don't need KeyshapeJS API, then you can try to export CSS animations from Keyshape. They are smaller than KeyshapeJS animations.

[Pixofield]

I hope this isn't tool late, but one way to get the files smaller is to use an external KeyshapeJS file for all the animations. It will load the library only once and the actual SVG file size is small. You can use external KeyshapeJS by changing 'JS Library:' to 'External' in the Keyshape export dialog.

[wwwonka]

Even when selecting "External" in the export options, still a problem persists. Each individual SVG redownloads the script on its own when appended to the DOM. You can see this behaviour showing in the "Network" inspector tab when at least 2 keyshape SVG are present in the document.

Is there a buil-in solution to that problem?

[wwwonka]

I attempted commenting out<script xlink:href="keyshapejs-1.2.0.min.js"/>inside the SVG and tested a loading strategy where KeyshapeJS is loaded in the window object before the SVGs are appended, they throw an error when loaded:
test.svg:49 Uncaught ReferenceError: KeyshapeJS is not defined

If only the SVGs had access to the global variables. Ensuring KeyshapeJS gets loaded before the SVGs would solve the problem. Any clue how to achieve that?

[Pixofield]

@wwwonka Web browsers should cache the KeyshapeJS library, if your server allows it.

[wwwonka]

You are right. Now that I tweaked my dev settings it is in fact loading from the cache.

However, here is an interesting solution:

1. Load KeyshapeJS
2. Load and inline the SVGs (with the external script tag reference commented out) directly in the HTML DOM.
3. Animate

That way, the SVGs don't have to look for any cache as the KeyshapeJS object is already declared.

The one part that is missing now is setting the initial state, as I don't have a data attribute on which to set a query string like with an object tag.

[Pixofield]

@wwwonka Do you mean the ?global=paused query string? If you are calling animate() yourself in step 3, then you can call KeyshapeJS.globalPause() after it to get the same effect. You could also just change the options for animate() to {autoplay:false, autoremove:false} or call KeyshapeJS.timelines()[0].pause() to pause the animation.