I am slowly finding my way around the Animator.

I can replace an image in a running animation via javascript, and position the new image where the original image was located with this:

target_node.style.webkitTransform = "translate3d(335px,54px,0px)";

But I got those magic numbers from the IDE. Next i would like to get them via javascript.

The original image has an ID. Inspecting the DOM for the exported animation, I see that the ID identifies a DIV (DIV1). DIV1 has a child DIV (DIV2). DIV2 has a child IMG … the target for image replacement.

But inspecting ‘style’ for those three (DIV1, DIV2, IMG) provides no translate3d values. I don’t see them either with Firebug or javascript (target_node.style.webkitTransform).

How do I reference an image translate3d location via javascript? Where are the translate3d values in the DOM?

Note that the image to be replaced does not move around in the animation … it’s position remains constant throughout.

FWIW, here is the dot-anim:

{"name":"New Image","type":"image","value":"","uid":"NfjYeEgC","properties":{"object-image":{"enabled":true,"src":"asset://sym14.jpg","inline":0,"width":107,"height":109},"width":{"enabled":true,"value":107},"height":{"enabled":true,"value":109},"translate3d":{"enabled":true,"x":335,"y":54,"z":0},"anchor":{"enabled":true,"value":"tl"},"object-name":{"enabled":true,"value":"plum"},"object-text":{"enabled":true,"value":""},"object-cssid":{"value":"sym-plum","enabled":true},
... and the dot-html:

#PFX-sym-plum{-moz-transform:translate(335px, 54px);transform:translate3d(335px, 54px, 0px);-webkit-transform:translate3d(335px, 54px, 0px);width:107px;height:109px;top:0;left:0;}