Skip to content

Instantly share code, notes, and snippets.

@tomhodgins

tomhodgins/scalable-hype.html

Last active December 6, 2020 21:51
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tomhodgins/f76b936ea90c4286b8f88285edbf231d to your computer and use it in GitHub Desktop.
Save tomhodgins/f76b936ea90c4286b8f88285edbf231d to your computer and use it in GitHub Desktop.
Download ZIP
paste this into the <head> of your Hype animation to enable scaling repsonsiveness
Raw
scalable-hype.html
<!-- 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>
@w3rafu
Copy link

w3rafu commented Dec 6, 2020

I wasted too much time looking for a solution without success. Thank you so much!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment