Hype Scale Document

A Tumult Hype extension for scaling documents to fit different screen sizes. This extension allows Hype documents to automatically scale according to various modes and constraints, making responsive design simpler and more flexible.

Description

HypeScaleDocument provides a way to automatically scale your Hype documents using different scaling modes like 'contain' or 'cover'. It handles resizing events and applies transformations to maintain your document's aspect ratio while fitting it within the viewport according to your preferences.

Default Configuration Options

The extension comes with the following default settings:

Option Default Value Available Options Description
scaleMode 'none' 'none', 'contain', 'cover' Determines how the document scales within the viewport
maxScale null Any number or null Maximum scaling factor allowed
minScale null Any number or null Minimum scaling factor allowed
alignment 'center' 'top', 'center', 'bottom' Vertical alignment of the scaled document
scaleFactor 1 Any number Additional multiplier applied to the calculated scale

Usage

After including the extension in your Hype document, you can configure it using the setDefault method in a script-tag in Head HTML:

// Basic configuration
HypeScaleDocument.setDefault('scaleMode', 'contain');

// Or set multiple options at once
HypeScaleDocument.setDefault({
  scaleMode: 'cover',
  minScale: 0.5,
  maxScale: 2,
  alignment: 'center',
  scaleFactor: 0.9
});

You can set these options in a Hype document head HTML or in on-scene load functions depending on your needs.

7 Likes

Max, is this also use for websites?

No, it's currently mainly for kiosk systems. But it could be. I just would need to look at the parent container and not at the window document.

1 Like

this is AWESOME!!! I have so many uses for this! Thank you!!

1 Like

Nice job Max bravo!, I wonder if it could be useful to build plugins to better embed animations in other software. There are already several plugins (including the official one for WP) but also for BlocsApp.
I could work on it for a free Stacks/RW, maybe with options to change breakpoint and a different scale Modes based on the screen length or other media query values

1 Like

Very useful, thanks Max.