Last active
December 6, 2020 21:51
-
-
Save tomhodgins/f76b936ea90c4286b8f88285edbf231d to your computer and use it in GitHub Desktop.
paste this into the <head> of your Hype animation to enable scaling repsonsiveness
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I wasted too much time looking for a solution without success. Thank you so much!