Last week I was trying to make an HTML5 animation responsive and I was experimenting with using scalable units inside my animation so no matter how big the animation displayed, it would scale up.

What I discovered was that, although it was easy for me to make the sizing grow or shrink, because the layout was built using position: absolute; and transform:; I wasn't able to easily make the positioning scalable along with it.

So I experimented with a few techniques before I was talking to my buddy Kael and he suggested I try using the scale() property to resize the animation as a whole to whatever size I needed it to display.

I could picture what I needed in my head - one wrapping element with the same aspect ratio as my content that would go around my animation, inside of which my original animation would be centered, then I would need to figure out the correct scale() value to ensure that the content inside stayed as large as the container had room for.

I started to experiment and came up with a technique I'm calling the 'Kael Scale'!

Making HTML5 Animations Scalable

For my animation, which was being composed in Hype, this meant adding in a little JavaScript library that would help me perform the calculations in my CSS, and then writing some styles that override the styles written when the animation is rendered as HTML:

  <script src=https://cdnjs.cloudflare.com/ajax/libs/eqcss/1.5.0/EQCSS.min.js></script>

  /* Scope the Hype animation container */
@element '[id*=_hype_container]' {
  $this {
    /* Expand to fill available width */
    width: 100% !important;
    /* But never grow taller or wider than the viewport allows */
    max-width: eval("innerHeight * (style.width.split('px')[0]/style.height.split('px')[0])")px;
    /* Calculate height based on current width and width & height attributes */
    height: eval("offsetWidth / (style.width.split('px')[0]/style.height.split('px')[0])")px !important;
  }
  $this .HYPE_scene {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform:
      translateX(-50%)
      translateY(-50%)
      /* Calculate Scale value based on width of container */
      /* If our document was 500px wide */
      /* an offsetWidth of 1000px gives scale(2) */
      /* and an offsetWidth of 250px gives scale(.5) */
      scale(eval("offsetWidth / style.width.split('px')[0]"))
    ;
  }
}

This code, when dropped into the <head> of any Hype animation, will allow you to make any Hype animation scalable.

Here's a video demonstrating how that works:

My mind was totally blown at how simple and effective this technique was. But it's not just HTML5 animations this technique has the power to make scalable, it's any HTML element with an existing fixed layout.

Experimenting with the Kael Scale

After the success of convincing an HTML5 animation to scale itself, I began trying to build a simpler version of the technique that could be applied to any element or layout.

Using this technique you need to know:

  • the original width and height of the element or layout you're making scalable

And that's it! Here's a simple example scaling a layout set using position: absolute;.

And if you want to see just how powerful this technique is, watch as I apply this technique to an image map and make it scalable/responsive.

Please enjoy responsibly.


3,170 0 19