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?
