Use Top/Left instead of webkit transform in Adobe Edge Animate

Question

I had a nice simple interaction using Adobe Edge Animate with jquery ui draggable and droppable. You drag boxes from one area into other places. All worked fine.

Then, I decided to add an entrance animation for the boxes. That ruined everything because jquery draggable animates the top: left: values of your object, but somehow adding animation in Edge made it set top: and left: to 0 and use webkit transformX / Y.

So now as soon as I begin dragging, the box jumps way down because draggable is animating the top: left:, and Edge Animate is keeping the transform

Is there a way to force EA to use top: left: for animation? Note, part of the box entrance includes a rotation, so possibly that's why it decided to use transform so it could do the X / Y and rotate all in one.

Any ideas?

Answer 1

The problem is that in AE you can animate "Top" and "Left", but you have no control over whether that becomes a transformX /Y or a change to the css top: left:. AE makes it's own mind up. It seems that once you somthing other than just move the item (eg rotate or scale) it decides to stop using top /left and combine it all into a single transform including x y and rot. AE does not let you choose to animate the css top: left: property and also add a css transform for rot.

nevertheless, I've found a working hack for now. when the drag starts, add a class

.notransition {
  -webkit-transform:none!important;
  transform:none!important;
}

and so the transform is erased and the drag works perfectly. The weird thing is that after the drop, DO NOT remove the class. It stays for the remainder of the time. If you think about it, it makes sense, since the transform is none and the top: and left have been permanently modified by jquery-ui draggable.