Make Any Hype Animation Scalable (responsive) with Element Queries


(Tommy Hodgins) #1

Hello Hype users!

I’m going to be using Hype to create a number of slideshow-like animations where an audio clip plays while words matching the audio appear on the screen. We’ve love for this to be scalable (responsive) but couldn’t find a setting or option that would let us do this inside Hype.

One solution we found (and will be using) is to override the default width and height values hard-coded in the animation, let the animation container expand to fill width: 100%; while maintaining the correct height relative to the width for the aspect ratio of the original animation dimensions, then to position the scenes in the dead center of that (now scalable) container.

The trick to making it scalable here is using the css scale() property to always ensure that no matter how large or small that container element is, the scenes inside are always zoomed to the same apparent size using scale().

For example, an animation with a default width of 500px placed inside a container that’s 1000px wide is going to use the formula: current container width on page / original scene width, so 1000 / 500 is going to give us a value of scale(2). And when a 500px-wide animation is scaled up 2x, it appears to be 1000px wide, filling its container.

If the same animation found itself inside a container that was only 250px wide, our formula of current width / original width yields scale(.5) which for an animation that’s originally 500px wide means it’s going to show up close to 250px wide when at .5x scale.

I’m calling this scaling technique the ‘Kael Scale’ after Kael who helped me invent it, and the following snippet can be dropped into the <head> of any Hype animation to enable Kael Scaling: https://gist.github.com/tomhodgins/f76b936ea90c4286b8f88285edbf231d


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

<style>
  /* 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]"))
      ;
    }

  }
</style>

Here’s a video demo of using the Kael Scale technique with Hype animations:

And here’s a standalone (non-animation) example of the Kael Scale technique: codepen.io/tomhodgins/pen/gmPvWr (won’t let me add more links)

And this technique can be used for more than just HTML5 animations too - this can be used to make any fixed layout scalable, including things that have never been possible to be made responsive before, like image maps. Here’s a scalable image map using this same technique: codepen.io/tomhodgins/pen/BWjxeN (won’t let me add more links)

What do you think - have you ever wished there was an easy way to make any Hype animation scalable?


Possible to scale size of Hypes to parent div with css or jquery?
Scale entire presentation to new resolution
#2

Very cool!

Can I recommend https://cdnjs.cloudflare.com/ajax/libs/eqcss/1.5.0/EQCSS.min.js for your second line for better performance + SSL support? I feel like this will be helpful for a lot of folks who hit the following issue in Wordpress embeds as well.

Also I should mention that while this is a cool technique, there is a method in Hype using Groups + Scaling that supports this behavior without code.


(Tommy Hodgins) #3

Sure, I’ll update my post and Gist to point to the CDN-hosted file. The file I linked to, while not hosted on SSL does always point to the latest/current version, so by using the CDN link it should be periodically updated if updates come out :smiley:

You should also be able to download and include the JS locally to the animation as well! The JS isn’t picky, it just has to somehow be present in some form in the same HTML document as the styles depending on it and it will work!


(Corrine) #4

Hi Tommy,

I’ve been using your technique to scale hundreds of hypes I have, it’s great! However I have found one issue:

Quite a few of the hypes will load too zoomed in/out, some seem fine though.
Upon clicking anywhere on the page it will return to its correct size.

Any ideas how to fix this?

Cheers


(Tommy Hodgins) #5

Hi @Corrine! Thanks for trying out my snippet, I’m glad it’s mostly working for you. I believe I know how you can fix the rest!

Using the JS library and snippet from above, the size of the containing element and the scale of the animation inside it are set based on the width that shows up on the page. If you click, type a key on the keyboard, resize the browser, or do anything, the whole style gets recalculated again. For some reason either the animations are 0px wide when the calculation first runs or are being added to the page after the time it runs. This is the case for stuff inside modal windows, or that would get added to the page after a click.

Try adding this either to the <head> of your HYPE animation, or on the page where the animations are showing up:

<script>
  // Run EQCSS
  EQCSS.apply()
</script>

And if these animations are being added to the page after it has loaded, and you know what is triggering them to be added (for this demo let’s say clicking a button runs showModal() and right after that is when it needs to be recalculated)

In your JavaScript where it would say showModal() you can add EQCSS.apply() to recalculate the styles:

// before
showModal()

// after
showModal()
EQCSS.apply()

There’s more information about manually triggering EQCSS to recalculate styles here: https://github.com/eqcss/eqcss/wiki/Understanding-EQCSS-Triggers

But if you’re able to point me to either a live page where this is happening, or a reproducible test case where I can inspect this and see what’s happening I might be able to help you solve this :smiley:


(Corrine) #6

Thanks Tommy, this is perfect - everything’s working as it should :slight_smile:


(Tommy Hodgins) #7

Glad to hear @Corrine! :smiley:


(Bryann) #8

This is great. One issue I noticed with this is it will not allow scene transitions. They become instantaneous.


(Tommy Hodgins) #9

Hi Bryan, I’m not seeing instantaneous transitions - the crossfade still seems to crossfade. For the Push transition it takes the full duration but the transition itself only updates at the end of the set duration.

My animation only used crossfades so I never saw this happening. I’m not sure why the technique for responsive scaling would affect the transition as well, but maybe a Hype developer can chime in :smiley:


(Audrey Johnson) #10

Hi Tommy, this code is exactly what I was looking for! It works great, but for some reason in Chrome and Safari it doesn’t load the animation when I open the webpage for the first time (works fine in Firefox). I have to do a hard refresh for it to appear. It’s definitely there because I can hear the audio running, but the hype container has disappeared. There isn’t even a blank space where it should be, the content lower down shifts up. I’m using a custom theme on Wordpress, built with Bootstrap. I’d be very grateful for any suggestions that might solve this issue. Thanks in advance!


#11

Can you share a link to your document? It could be something your theme or something in Bootstrap that is causing this issue. Also, do you have ‘offline application cache’ turned on for this document? If so, I recommend turning that off.


(Audrey Johnson) #12

Hi Daniel, thanks for your quick response. It’s just a local site at the moment so I don’t know how I could share that easily with you? I have also found out that if I resize the window, the hype document becomes visible. The ‘offline application cache’ is turned off already. I thought it could be to do with Bootstrap being a responsive framework but I just wanted to get some opinions.


(Audrey Johnson) #13

There was a conflicting bit of Javascript, fixed it now, thanks for your input anyway!


(Ben) #14

Awesome, you save me hours playing the Flexible Layout with no luck.

Thanks!


(Brian) #15

Wow this is great! I do have the same issue as someone below though. My animation isn’t full screen till I click on it http://www.bpccreative.com/quin/. Any ideas?

Thanks in advance


(Jonathan Deutsch) #16

I’m guessing you might be running into problems because you have two layouts in your document and this is at odds with wanting to do scaling from a javascript/eqcss source.


(Brian) #17

Can I remove the size I created it in, from the hype html?


(Brian) #18

Jonathan, were exactly right it was because I had 2 different layouts. Thanks!