"Code" button in Top panel will show animation code as well as html if Animation panel is open.

Ctrl click to show only selected element's html.

The Element selection input will accept an id being typed in and made the activeEl when the key Enter is pressed

Keyboard arrows will incremently move selected element.

Stroke dasharray accepts space delimited numbers.

Create a new sequence:

Control click on any of the assembler() buttonsto clear any previous assembling.

Clicking on an assembler() button will add a record of that elements path number and path position, comma delimited, to the Code Result readout box.
Shift clicking will overwrite last entry.

Pathball visibility icons in Animation panel:
Double click to show that Pathball only, and hide all others.

Insert newSequence must be in the format of:

[
   [10,2,8,2], //playAniParts1() element sequence
   [2,8,2,10], //playAniParts2() element sequence
   [0.853,0.338,0.656,0.902], //playAniParts1() path sequence
   [0.872,0.898,0.656,0.338], //playAniParts2() path sequence
];

A variable name will be added dynamically

Because the Transform css is inaccessable, it is necessary to store each objects transform properties in a Javascript object: Objects[object.id], and then retreive them from there.

The sliders assign the changed value to the JS Object at the same time as applying it to the element. Upon change of element the sliders are reset from the values stored in Objects[object.id].

resetSliders(el) sets slider values from Objects[] array

The initial values for the scale of each element are entered into Objects[object.id] during initObj(), and taken from data-var property values on each element in the html. Other necessary properties are entered individually afterwards