Some code snippets to make Adobe Edge HTML5 animation exports responsive. The code below work out the percentage scale (responsive by width) of the browser width (mobile device inc) and uses CSS3 to scale the export so that it resizes to match the container. It can then either be put into an iframe (in entirety) or separated out and included within a wrapper div.

1. Add the wrapper HTML to the stage.
2. Include responsive.js and reponsive.css files.
3. Change the original dimensions below of your export size.
4. Optionally comment out jquery (_edge.js) if your already loading it.


        //responsive scaling for stage for HTML5
        function repositionScale()
            //Original image dimensions:
            var imageH = 1136,
                imageW = 640;

            //work out the percentage scale (responsive by width)
            var scale = (W.innerWidth/imageW);

        //respond on window resize
        $(W).bind('resize', function(e)
            //could use a debounce here instead of setTimeout
            if(W.RT) clearTimeout(W.RT);
            W.RT = setTimeout(function()
                //recalculate the vertical position of the main nav
            }, 300);

})(jQuery, window);

* Monkey patch jQuery 1.3.1+ to add support for setting or animating CSS
* scale and rotation independently.
* Released under dual MIT/GPL license just like jQuery.
* 2009-2012 Zachary Johnson
(function ($) {
    // Updated 2010.11.06
    // Updated 2012.10.13 - Firefox 16 transform style returns a matrix rather than a string of transform functions.  This broke the features of this jQuery patch in Firefox 16.  It should be possible to parse the matrix for both scale and rotate (especially when scale is the same for both the X and Y axis), however the matrix does have disadvantages such as using its own units and also 45deg being indistinguishable from 45+360deg.  To get around these issues, this patch tracks internally the scale, rotation, and rotation units for any elements that are .scale()'ed, .rotate()'ed, or animated.  The major consequences of this are that 1. the scaled/rotated element will blow away any other transform rules applied to the same element (such as skew or translate), and 2. the scaled/rotated element is unaware of any preset scale or rotation initally set by page CSS rules.  You will have to explicitly set the starting scale/rotation value.

    function initData($el) {
        var _ARS_data = $'_ARS_data');
        if (!_ARS_data) {
            _ARS_data = {
                rotateUnits: 'deg',
                scale: 1,
                rotate: 0

            $'_ARS_data', _ARS_data);

        return _ARS_data;

    function setTransform($el, data) {
        $el.css('transform', 'rotate(' + data.rotate + data.rotateUnits + ') scale(' + data.scale + ',' + data.scale + ')');

    $.fn.rotate = function (val) {
        var $self = $(this), m, data = initData($self);

        if (typeof val == 'undefined') {
            return data.rotate + data.rotateUnits;

        m = val.toString().match(/^(-?d+(.d+)?)(.+)?$/);
        if (m) {
            if (m[3]) {
                data.rotateUnits = m[3];

            data.rotate = m[1];

            setTransform($self, data);

        return this;

    // Note that scale is unitless.
    $.fn.scale = function (val) {
        var $self = $(this), data = initData($self);

        if (typeof val == 'undefined') {
            return data.scale;

        data.scale = val;

        setTransform($self, data);

        return this;

    // fx.cur() must be monkey patched because otherwise it would always
    // return 0 for current rotate and scale values
    var curProxied = $.fx.prototype.cur;
    $.fx.prototype.cur = function () {
        if (this.prop == 'rotate') {
            return parseFloat($(this.elem).rotate());

        } else if (this.prop == 'scale') {
            return parseFloat($(this.elem).scale());

        return curProxied.apply(this, arguments);

    $.fx.step.rotate = function (fx) {
        var data = initData($(fx.elem));
        $(fx.elem).rotate( + data.rotateUnits);

    $.fx.step.scale = function (fx) {


    Starting on line 3905 of jquery-1.3.2.js we have this code:

    // We need to compute starting value
    if ( unit != "px" ) {[ name ] = (end || 1) + unit;
        start = ((end || 1) / e.cur(true)) * start;[ name ] = start + unit;

    This creates a problem where we cannot give units to our custom animation
    because if we do then this code will execute and because[name]
    does not exist where name is our custom animation's name then e.cur(true)
    will likely return zero and create a divide by zero bug which will set
    start to NaN.

    The following monkey patch for animate() gets around this by storing the
    units used in the rotation definition and then stripping the units off.


    var animateProxied = $.fn.animate;
    $.fn.animate = function (prop) {
        if (typeof prop['rotate'] != 'undefined') {
            var $self, data, m = prop['rotate'].toString().match(/^(([+-]=)?(-?d+(.d+)?))(.+)?$/);
            if (m && m[5]) {
                $self = $(this);
                data = initData($self);
                data.rotateUnits = m[5];

            prop['rotate'] = m[1];

        return animateProxied.apply(this, arguments);


/* wraps the stage */
#stage-wrapper {
    position: relative;
    text-align: center;
    margin: 0 auto;
    height: 100%;
    width: 100%;

/* container is scaled */
#stage-container {
    transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;


Add a wrapper around the stage. Use your own adobe edge export id.

Tags: adobe hype html5 animation repsonsive
Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.
  • rivadaice


  • dkutz

    The script works great, but I have a problem: I have an HTML5 animation that is w550 x h400 pixels. I put it on my web page in a 550px container, but as soon as it loads, the script uses the size of my screen (1440px) to calculate the scaling size, rather than the size of the container it’s in. So, immediately upon loading the page, the animation instantly scales up to nearly 3 times the desired size. It’s responsive, so it shrinks down proportionately as my window size decreases, but the initial scaling is killing me. I don’t know how to get it to load at normal size and then scale down from there. Know what I mean? Can anyone help me out?

    This is the script I was given:

    which works fine placed in the main body of my page. But to make it responsive…I used this script and got the behavior noted above.

    This is how I modified it:

    …if I remove the width and height in the style attribute, the animation doesn’t even display, so I have to leave it in there. I used 550 and 400 as the original image dimensions in responsive.js.

    Can any one give me some advice about how best to implement this script with this particular animation? Any help would be MUCH appreciated!

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!