Advice about my "confused state"

A point of clarification for posterity on terminology: "canvas" is a very specific HTML tag that is used for drawing graphics, but Hype does not utilize this. Instead, Hype constructs HTML dynamically via the DOM APIs, such that it presents as a normal web page. This is why instead we typically use the terms document or scene, which is simply a div containing other elements. Now onto your question...

It is true that Hype's scenes have set widths and heights that use absolute element positioning. While some parts of Hype like Responsive and Flexible layouts give a little leeway to changing the size of scenes and repositioning elements, ultimately thinking about it as a Keynote presentation is a good model.

This is Hype's model because Hype's goal is to favor making animations and interactivity. It is much easier to reason about this when things are absolutely positioned.

While there are some features that overlap more with scrolling web pages, such as the On Enter/Exit Viewport actions to start animations when items come into view, and the On Drag action that can be bound to a timeline, there's probably also room to improve with more dedicated scroll actions in a future release.

I tend to tell folks that if your document will have a high degree of animation and interactivity, choosing Hype for the whole page can probably work out. But if you are planning a more traditional web page, it may be better to build this with another tool and then insert Hype animations onto the page as appropriate.

There are some bits of code that can in fact help with managing scrolling and timelines though. Here's a couple: