Hi, how do I please make scrolling scroll up and down scenes?

Using JavaScript with Hype
1

Hi, how do I please make scrolling scroll up and down scenes? But only imitate the command "next scene" and "previous scene" without any intermediate step. Thanks

2

Note that if you set the Transition from one of the Push variants to the Page Turn then you'll get smooth swiping. But that's a swipe action and not a continuous scroll.

Scenes are made such that only one can really be shown at a time, so if you're constructing a page that could be sized such that it shows multiple scenes at the same time (a like a long page) then it won't really work. However, there are a few different approaches to achieve the same basic result

  • Use Symbols in a single scene, as symbols are basically 'scenes within scenes' anyways
  • Use multiple Hype documents and stitch their exports together by copy/pasting their divs all in a single .html file
  • Use a timeline that acts as how you want to scroll, and then use some code that binds to it. There's several solutions on the forums if you search. Here's one I found that looks more like individual scenes: Sticky Scroll Effect
3

I understand what you mean, and I am aware that it is possible to have only one scene displayed at a time. And that's why I want a completely easy change of scene from clicking a button to scroll down or up. I don't want any intermediate steps. I want the scrolling to trigger the "next scene" function.

4

I think if you have scroll events that are not interactive -- that is they produce a result at some point but do not scroll, it will not yield a good UI for your site. This is typically referred to as "scroll jacking."

To implement a basic solution, you'd need to develop a threshold for when enough of a scroll represents a scene change. Yet this threshold is not visible to users so it will be an exercise in frustration to figure out what to do to trigger the event.

Here's a basic example project you can use:

ScrollForSceneChange.hype.zip (30.8 KB)

Note that all the code is in the head html, so you just need to copy everything in the <script>...</script> section to your project if you want to use it.

I personally find it not to great to use, even with some niceties like tying the scene change duration to the scroll speed. (Also please note that this won't work on mobile, since it would need to account for touch events).

Perhaps you can elaborate more on your specific use case and why you want this particular solution, vs. the other ideas presented from my previous post?

5

Yes, this is it. But it only scrolls down the page. I need it back up too :slight_smile: And on mobile there is SWIPE and it's the same.

6

Sorry, I just found out it works both ways. So thank you very much. That's exactly what I needed. Great

1 Like