Javascript Rig for JnS

Manipulating AE Joysticks ‘n Sliders directly in a browser with bodymovin’, that’s what you want to do.
I’m making this up and finding out how to do it as I go along.
So far I manipulate the svg directly with JavaScript.

I’ve now got functions to manipulate position/scale/opacity keyframes, which values you can easily find in AE.
If you don’t have anything better to do, I guess you could now figure out how to do your own rig from my example.
Meanwhile I’ll try to develop this further.

You also need to find the SVG path you need to manipulate, do this with ‘inspect elements’.
You set the paths in the javascript and put the keyframes in the KeyArray:
[NameofJoystick, SmartLayerID, ParentLayerID, parent-scaling, has-parent, type-of-var, #of-values-per-keyframe, #of-keyframes, AnchorPoint, key1, key2, key3, key4, key5, etc]
NameofJoystick: from Joystick Array, name is ID of the Layer in AE
SmartLayerID: to determine which svg or json value to adjust
ParentLayerID: group in which group is nested
parent-scaling: if a parent how does it scale per quadrant [AP, X, -X, Y, -Y]
has-parent: who’s the parent of the item, if any.
type-of-var: current possibilities p, s, o (position, size, opacity) NOTE: to place position before size, because position is needed to replace a resized object back at the right place
#of-values-per-keyframe: for position and size it is 2, for opacity one, probably not really useful :)
#of-keyframes: in a XY rig this would be 5, in case I will also do sliders with more values.
AnchorPoint: in case of position and scale this needs to be set
key1 etc, the values of the keyframes
E.G. (Note that KeyArray[0] (the first one) needs to be there for now, because it is needed as a zero value):
KeyArray = [
[Selector, faceHead, 0, [1,1,1,1,1], 0, ‘p’, [2], [5], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0]],
[Selector, faceHead, 0, [100,100,100,100,100], 0, ‘p’, [2], [5], [124.5,58.5], [124.5,58.5], [160.5,58.5], [91.1,58.5], [124.5,51.5], [124.5,67.5]],
[Selector, faceHeadMask, faceHead, [1,1,1,1,1], 0, ‘p’, [2], [5], [124.5,58.5], [124.5,58.5], [160.5,58.5], [91.1,58.5], [124.5,51.5], [124.5,67.5]]

To do:
– making a drag n drop Joystick
– have more than one Joystick
– rotation, skew, shapes, paths (this will probably take a while)
– manipulate json -> play bodymovin while manipulating the rig
– have a standalone svg

Anyone has suggestions for improvement? Let me know.
Would be nice if bodymovin can give smart IDs to the paths and svg-groups with the keyframes.
So when I name a shape layer group with #shapyMcShapeface the svg group gets id=”shapyMcShapeface”
Would that be hard to do?
For some nested paths I needed to add values of parents. I guess that needs to be done by hand.
Can you think of a way to get all the keyframes out of AE in one go?

Take a look at the AE project and the javascript doing the actual work on top of bodymovin.
AEP file with this head