Scale Edge Animate stage using Greensock

Scaling the Edge Animate stage with Greensock

I’ve seen a few implementations of keeping the Edge Animate stage scaled to the screen (see Edge Animate’s PM Sarah Justine’s method here) so for as much my own reference as anything else here’s a similar way to do it using Greensock (whilst maintaining aspect ratio).

//firstly set an accessible reference to stage and stageParent
var stage = $("#Stage");
var stageParent = stage.parent();

function scaleStage (){ 
  stageWidth = stage.width();
  stageHeight = stage.height();
  parentWidth = stageParent.width();

  var desiredWidth = Math.round(parentWidth * 1);
  var rescale = (desiredWidth/stageWidth);

  TweenMax.set(stage, {
    scale:rescale
  });

  TweenMax.set(stageParent, {
    height:stageHeight * rescale
  });

 }
//later add listeners for any resize or orientation change events
window.addEventListener('resize', scaleStage, false);
window.addEventListener('orientationchange', scaleStage, false);
//now call it immediately to scale it to the current screen
scaleStage();

And that’s it! Luckily for us Greensock handles all the vendor prefix nonsense that just gets in the way of a good project.

You could just as easily use the lighter TweenLite version – I just tend to use TweenMax all the time as it includes the super spectacular TimelineMax plus some other goodies and it means I don’t have to write a script include for each individual library.

I hope you find it useful!

12 thoughts on “Scale Edge Animate stage using Greensock

    1. To be honest, having had a look at that, it seems to miss the point of UI design. Instead of creating a polyfill/hack like that I would revisit my UI structure and ensure that this kind of (bloated) solution isn’t necessary.

      Instead I would design it so that nested elements were never required to be visible whilst their parent was transparent. Just my opinion though!

  1. My UI structure is based in the world of the WordPress CMS to which I add Greensock and JQuery. Building a UI with transparent Parent Divs and wanting non transparent Child Divs to be inside is the final goal : Layering Legible Copy and non transparent images correctly on top of Parent transparent Divs in a visual UI experience.
    I’m not a super hero coder like yourself and thought you are the Greensock Guru thus you must know a solution and maybe via Greensock instead of the above hack. Is there a solution via Greensock?

    1. I’m not a super hero coder at all but I do like to take a more UI-led approach to problems like this rather than code my way out of them.

      However I do see your predicament given the constraints of the environment in which you are deploying your code (i.e. WordPress).

      One way I’d tackle this is to work out the offset of the child in relation to the parent and then do myChildElement.appendTo(theParentsParent) using those offset coordinates.

      With a little bit of experimenting with those offset values the child you want to remain with an alpha of 1 will pop on top of the parent whose alpha is 0 in exactly the same spot on the screen.

      The downside of this is that if the child was behind other elements in the parent (i.e. its zIndex was lower) then this will be lost because the child is now sitting in the parent’s parent directly on top of the original parent (and the parent’s contents).

      I just said parent far too many times.

      Anyway this is just a way to explain it in English as opposed to code. If you got your head around my garbled solution (and it’s appropriate for your problem) then Greensock can easily deal with this using TweenMax.set etc.

  2. Hi Chris,

    I’ve been procrastinating on this now for a few days, I’m building an app inside edge and wonder if this solution will work.

    The only problem I can see is the UI so with my nav bar sitting at the bottom and prototyping the app at the highest screen resolution will this green sock fix solve my problem when wrapping it up in phonegap? So will the nav bar stay at the bottom of the viewport for all the different screens I hit?

    I’ve been thinking about using the edge commons library and their adaptive layouts script and just position the nav bar at the right x and y at each breakpoint.

    1. This script simply scales the entire project. It’s not ‘responsive’ using top and left positions based on screen/browser sizing; it’ll simply maintain the aspect ratio of the stage and scale it to fit the device’s screen.

      So if you use images in menu items or elsewhere they will be scaled and could potentially look blurry.

      So if you’re hoping to have your EA project look good on 4:3, 16:9 and 16:10 aspect ratio devices then maybe the Edge Commons library may be more suitable.

  3. Do I just need to copy this? Where should I paste it? I still have the responsive scale blurry issue and I can’t fix it.

      1. Well maybe Adobe are applying the translateZ hack to the stage and forcing everything on to the GPU thus making elements look blurry. Maybe have a look on the Chrome forums.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s