Goals:

- Maintain 5:12 aspect ration of photo as viewport narrows

- Get red slider timer along left edge as well as the gradeint rectangle to scale vertically as the 5:12 viewport shrinks

Settings:

The vertical elements are set to scale vertically and pinned to the left edge.

The horizontal elements are set to scale horizontally and pinned to the top edge.

The photo is set to scale in both directions and is pinned left, top and right.

Note:

The horizontal band and timer is in there just for reference, and to show that both elements are scaling properly . Both horizontal and vertical timers should reach the end of their crawl at the same time.

In the Hype Document above:

Key setting:

- The height scale box in the Hype Scene Inspector is NOT checked

Results:

- The 5:12 proportion IS maintained as the viewport narrows

- But the vertical gradient box and timer do not scale

In the Hype Document below:

Key setting:

- The height scale box in the Scene Inspector IS checked

Results

- The 5:12 proportion IS NOT maintained as the viewport narrows

- In HYPE PREVIEW, vertical gradient box and red slider time scale up and down with the viewport (yea!)

- BUT in this iFrame with the Javascript applied the the vertical gradient box and timer scale up to the viewport height when it is larger than 500px, but do not scale below 500px

Solution hypothesis:

- Check the height scale box in the Scene Inspector so the vertical gradient box and red slider timer do scale with viewport height

- Use some other combination of iframe code and javascript (or CSS) to preserve the aspect ratio