Scroll right and left, start in middle (drag timeline?)




I’m really new to working with Hype, so I’m a bit stumped with this idea I had.

I’m making a site only for smartphones and I’d like the actual scene to be twice the width of the screen, so you can scroll to the right and left. You should also be able to scroll down no matter where you are. I’d also like it to start in the middle and have a sort of “snap to” functionality, so that if you scroll in the middle or to the middle it’s a bit guided and doesn’t wiggle about.

A gif here in case its a bit confusing what I mean:

I’ve tried to do it with a transparent rectangle the size of the screen that controls two timelines on drag - horizontal for the side, vertical for up and down. But it doesn’t seem to work, it jumps around and behaves all kinds of wrong.

Another thing I tried is making a group of everything with auto scrollbars, but here I don’t know how to start in the middle and how to do the guided scrolling.

I’m sorry if this is a bit confusing, I just don’t know how to achieve this. Maybe I need to use some javascript? I’m super super grateful for any help!!!

(𝕄𝕚𝕔𝕙𝕒𝕖𝕝 𝔾𝕒𝕣𝕠𝕗𝕒𝕝𝕠) #2

Well, a horizontal “Drag” event could be used to control one timeline and a vertical “Drag” could be used to control another timeline. That would let the visitor control the position of the elements.

However, that doesn’t have snapping. Maybe something like this might work… (11.2 KB)

Although, if someone keeps swiping in one direction, the timeline will start over. This is in Hype 3.0 though.

(Mark Hunte) #3

Have a look at this thread