Scrolling - using the mouse wheel - on the same scene in many directions

Using JavaScript with Hype
1

Hello.

I would like to allow users to see the content by scrolling (using the mouse wheel, without a scrollbar being visible), and when a limit of the stage is reached, to starts in another direction and, in a few steps, it reaches the starting point and continues endlessly.

I hope that this image may help / clarify more.

scroll
scroll1000×1000 15.1 KB

Scrolling.zip (12.9 KB)

I was searching on the forum the post related to the scrolling but I haven't found something similar.
Can someone show me a similar post or create a small demo, which I can develop further?

Thank you.

2

scrollFake_endless.hype.zip (19,9 KB)

the solution may be controlling a timeline. though i don't know if this'll fit for your needs ...

3 Likes
3

Thank you very much for your support, @h_classen !
I will try to adapt your solution and test with my concept!

4

Hello again @h_classen .
This is the model that I was trying to use: React App (desktop only).
I am putting it here as idea, as I think it is a beautiful concept.
Thank you!

1 Like
5

Hallo Hans,
Thank you again for your support.

As I put the structure on the server it is not moving the scene
later edit - ONLY ON FIREFOX browser.
On Chrome, Safari, Opera it is full functional.

It will allow me to scroll on Firefox only if I remove the

<style>
body{
overflow: hidden;
}
</style>

But in that case the scroll is no more functional as it should.

  1. Can you recommend me a solution for this?

    //

  2. Also, if it is not to much to ask, would be possible to make the scroll back, when the user do the scroll up?

Thank you.
Ionut

6

scrollFake_endless_plus_ff.hype.zip (20,1 KB)

2 Likes
7

Thank you very much.
It's very interesting how again only Firefox interprets differently. This time, Firefox interprets the scroll up as down and the scroll down as up.
Others (Safari, Chrome, Opera) interpret correctly.

8 
// Get the current time in the Main Timeline
let time = hypeDocument.currentTimeInTimelineNamed('Main Timeline');

// Get the duration of the Main Timeline
const duration = hypeDocument.durationForTimelineNamed('Main Timeline');

// Set the step size for incrementing/decrementing the time
const step = 0.05;

// Define the wheel function to handle mouse wheel events
function wheel(event) {
  // Prevent the default behavior of the event
  event.preventDefault();

  // Get the mouse wheel delta value
  var delta = event.wheelDelta || event.detail;

  // Check if the current time is at the end or the beginning of the timeline
  if (time >= duration) {
    time = 0;
  } else if (time <= 0) {
    time = duration - time;
  }

  // Determine whether the event was triggered by a DOM mouse scroll
  if (event.type == "DOMMouseScroll") {
    // If the delta is greater than 0, decrement the time by the step size
    if (delta > 0) {
      time -= step;
    } else {
      // Otherwise, increment the time by the step size
      time += step;
    }
  } else {
    // If the delta is greater than 0, increment the time by the step size
    if (delta > 0) {
      time += step;
    } else {
      // Otherwise, decrement the time by the step size
      time -= step;
    }
  }

  // Go to the new time in the Main Timeline
  hypeDocument.goToTimeInTimelineNamed(time, 'Main Timeline');
}

// Add the wheel function as a listener for mousewheel and DOMMouseScroll events
window.addEventListener("mousewheel", wheel);
window.addEventListener("DOMMouseScroll", wheel);
2 Likes
9

should have tested this better :see_no_evil:

1 Like
10

:pray: :tada:

Thank you so much, Hans!