Animator has the "flexible" dimension type, but that seemingly just sets max/min widths on the wrappers.

What we really need is the ability to output values as percentages, rather than pixel. With this simple change, Sencha's output can be truly responsive, meaning objects and animations will scale as the container changes.

I've tested this by tweaking Animator's output, and with just a few changes, you can make your animations responsive:
  • Change all width, height, and animation position properties that are set in px, to %. I did this just by dividing width and x axis values by my ideal width (which is the width of the stage when designing in Animator). Likewise for height / y values.
  • Add max-width: 100%; height: auto to the "#slideshow-an-anim .slideshow-an-stage img" rule. You will likely already have this rule given a stylesheet from a responsive site
  • Change your width/height on #slideshow-an-anim to either a % or a max-width/max-height.
The only other tweak needed is the remove the position: absolute given to the div inside objects that wrap images. In the output it currently has no class or id, so that's a bit annoying. But you can cancel it by doing:
#slideshow-an-anim .slideshow-an-stage div div { position: relative; }
position: static would work there as well.

With just that, objects can now scale with their containers, therefore translating to a responsive website, working on desktop and scaling to mobile.

It seems like with the output from Animator SO close, percentage based values for output should be an option. While making the changes I mentioned are simple, replacing every value with a percentage is unnecessarily time consuming.

In short, adding an option for percentage based output would be amazing!