Results 1 to 4 of 4

Thread: Add percentage based output for responsively sized animations

  1. #1

    Default Add percentage based output for responsively sized animations

    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!

  2. #2


    I just completed this for the animations found here: was a complete pain to do manually, and now I'm basically unable to ever go back and get updated code from Sencha.This seems like a crucial feature, is there any hope of this being implemented?

  3. #3
    Sencha User
    Join Date
    Jun 2014


    That's sth. I really would like to see as well!

    Along with the general possibility to use all HTML valid units. Especially % and em maybe even ex, cm, in and pt for some edge cases. Can't see why currently all values are bound to px.

  4. #4


    this is an issue I care

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts