Is there a way to add actions on two finger swipe/slide on a scene?

Scenes
1

There is a swipe top,down,left,right on hype scenes.

But what I am going for is a two finger scene slide to bring on a new scene as if we had scrolled using the two finger slide which is normal behavior on laptops and desktops.

I did not want a tall scrolling website exactly but wanted to simulate it on my small (600 px) fixed height scene. When the user uses a two finger slide/swipe up, I wanted to load the next scene. But i couldn’t find support for this gesture in the scene actions list.

The swipe action on scenes does not work well on laptops with trackpads because it forces the user to click and swipe instead of doing a normal slide/swipe without holding the left click.

Any solutions please?

2

well, iOs offers gestureevents while android does not …
so i guess best way would be to rely on third party js-library that supports two finger swipe … may be be Quo.js is what you’re searching for …

3

My problem is not the touch devices but rather non-touch devices like laptops equipped with trackpads. On touch devices hype’s own event of swipe would work fine. But hype does not have a ‘scroll’ gesture support nor did i see that on quo.js

The problem with swipe and drag on trackpad equipped laptops is that to swipe/drag on trackpad you need to click and hold the click while dragging - which is not friendly.

Does quo.js support a smooth slide event? I did not see that on their page but maybe someone who has used it can advise…
I could see drag and swipe but they would have the same problems on a trackpad. quo.js is built for touch devices where there is no issue in swiping or dragging as it does not involve clicking and holding (it just needs pressure and swipe/drag which when translated to trackpad means an additional click and hold)

What i need is the very normal scroll gesture to work for switching to new scene (two finger slide on a trackpad without the need to click or hold or drag)

Maybe I am missing something here and there is some way to make swipe work on a trackpad without having to really click/hold/drag?

4

I suspect that this may not be possible on desktop browsers since it is the Browser app that is set to intercept these kind of gestures rather than the browser web page and web engine.

( I could be wrong )

5

So maybe there is some way to know when the user is trying to scroll past the end of the page or the beginning of the page - so that we could trigger a behavior of taking the user to the next or previous scene respectively?

6

Search the site, there should be examples of that already.

7

Seriously? No trackpad functionality? What about mouse wheel settings, I’m sure there used to be an option. I really need to be able to control the timeline with 2 finger drag as the majority of people using our site will most likely be using a laptop or desktop. I understand the emphasis on mobile these days but touch functionality shouldn’t replace basic desktop controls or am I completely missing a setting in the actions menu?

Please help

Cheers :blush:

1 Like
8

There is a pretty comprehensive tutorial on how to detect scrolling and run timelines and the like: http://blog.tumult.com/2014/08/06/tutorial-easily-create-parallax-effects-and-single-page-scrollable-experiences-in-tumult-hype/

The code to control a timeline based on the scroll direction is copied below:

function wheel2(event) { // other browsers
        event.preventDefault();
        if (event.detail < 0 && (hypeDocument.currentTimeInTimelineNamed('Main Timeline') > 2)) {
            hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionReverse);
        } else {
            hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward)     }
    }

function wheel(event) { // Firefox
        event.preventDefault();
        if (event.wheelDeltaY > 0 && (hypeDocument.currentTimeInTimelineNamed('Main Timeline') > 2)) {
            hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionReverse);
        } else {
            hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward)     }
    }

window.onmousewheel = document.onmousewheel = wheel;
    window.addEventListener("DOMMouseScroll", wheel2, false);
    document.addEventListener("DOMMouseScroll", wheel2, false);

If you run this ‘on scene load’ it will commandeer the Main Timeline.

Be careful with scroll jacking: it intercepts the intention of the user (to scroll to a different part of the web page). Tapping, dragging (click + drag) and scrolling to a point (as we do in waypoint actions) are intentional. These are events that can be listened to, as opposed to modes of navigation that are intercepted (as in the case of capturing scrolling).

Worth a read: http://www.sitepoint.com/scrolljacking-accessibility/

2 Likes
9

Hi Daniel,
Thanks but this isn’t the control that I was after, this method just plays through the entire timeline with the first 2 finger swipe and only works once then stops. I was looking to scroll through the content vertically under the slightly transparent header bar (that also has blur ‘under content’ filter effect) would it be better to make the scene the entire height of the content? if so is there a way to pin header and footer to the top and bottom of browser?

Cheers :smile:

10

Can you perhaps show us something you are working on so we don't have to guess exactly what you need. You asked for control of a timeline using 2 fingers on a trackpad. Daniel's method shows you a way albeit using continueTimeline.

Both your posts seemed to point to two separate things.

What do you mean here exactly?

Also, can you let us know the degree to which you are competent with Javascript.

This following code used in a scroll listener event will move your timeline an amount calculated by the scrollY value and a multiplier. (usually I make my timeline about 10 secs long for smoother movement)

code:

hypeDocument.goToTimeInTimelineNamed(scrollY * 0.01, 'TIMELINE')
11

This is where I’m up to so far and I’ve almost got it functioning as I want it but I’m having a few issues with the header shifting on iPad when it over dragged downwards.

OutpostFVX_Site_v05.hype.zip (277.2 KB)

Also now that I have sticky header working in main layout it completely breaks if I try to add additional layouts :frowning:

zero degree of javascript competence other than cut and paste (then screaming when everything breaks!)

12

Right. I have a page loaded and running the scroller. On ‘Main Timeline’ I pause .5 seconds after the last automatic animation, and then scroll again restarts the timeline so .5 seconds later, the next scene loads. In this way I can two finger scroll from scene 1 to scene 2 and so on.
I also want to be able to scroll back ‘up’ the scene list from 2 to 1, but so far I’ve had no luck.
The first thing I tried was to have a ‘Jump to Previous scene’ at 00:00.00. I thought if I did ‘On Scene Load’ goto time 00:00.05 then pause, the javascript above would then run the timeline backwards and launch the scene change to the previous scene, but this doesn’t work. Any ideas?

13

Do you mind posting a zip of your .hype document? It may be easier to advice with that.

One thing to note is that actions in Hype’s UI only operate on the scene that they are on (there’s a small exception/bug if you first have an instant transition and only use the main timeline); you’d have to set some state via javascript if you want to control the “next” scene in this manner.