More support for Swipe Please


#1

I’ve noticed that Hype has a rather limited set of features when it comes to devices such as track pads, wheel mice and the Apple magic mouse. I know that we can stuff Hype full of javascript to make it do certain things that are a bit out of the ordinary, but these devices are so common these days, I would have thought that better support for these devices would be incorporated into the basic Hype offering.

A typical example is horizontal sliders. These are becoming quite popular now and are a very simple method of horizontally scrolling image galleries etc. A perfect example is THIS SITE.

There are a number of horizontal scrollers that work by simply hovering a mouse pointer over the scroller and swiping from left to right on a trackpad or magic mouse. In Hype, it seems there has to be a click and drag function which seems a bit sloppy.

Of course, on touch-screen devices, things work a little better, but for people using desktops and laptops with trackpads, wheel mice or a magic mouse, its all very cumbersome. Is it not possible to add this type of functionality as a standard feature, rather than have to mess around with learning javascript?


#2

@frank52

Attached is an example of a horizontal swipe for a single image (wider than the viewport), along the line of your example “Rolex” link.

Horiz_ImageSwipe_JHSv1.hype.zip (416.4 KB)

You can swipe the image or drag the slider at the bottom to move the image horizontally.

The image is contained in a symbol which accepts swipe commands.

I do not have a magic mouse or trackpad - but it works with my “regular” mouse and my iPad.

The image is not set-up for a scroll ball~wheel, but it could be.


Please note:
I’m not trying to hit every item on a wish list in this basic demo - just showing one possible approach.


#3

Thanks for that Jim. I’ve already discovered how to do the click and drag thing and as you say, it works with a simple swipe on tablets. The problem is, it just won’t move the slider on a desktop or laptop unless it is a click and drag. What I would like to achieve is a simple hover over the slider and then use the mouse-wheel or trackpad on the computer to send it from side to side (just like the ones on the Rolex website). I guess this is only going to be possible by delving into javascript. But thanks for taking time out to make your example - much appreciated.


#4

Trackpads are now based off the mousewheel event (basic support in some browsers) so you’ll have to get fingers dirty with JS (not whole hand).
The following code should get you going on listening for the wheel event (aka trackpad). You can run this on any element’s mouseover and it’ll listen for the wheel event and continue a timeline forwards or backwards.

element.onwheel = function(e){
	if(e.deltaX < 0){
		console.log("swiping left")
		hypeDocument.continueTimelineNamed('myTimeline', hypeDocument.kDirectionReverse, false)
	}
	if(e.deltaX > 0){
		console.log("swiping right")
		hypeDocument.continueTimelineNamed('myTimeline', hypeDocument.kDirectionForward, false)
	}
}

#5

TAG - I’m it! :sunglasses:

@frank52

Attached is v2 of my previous demo: Horiz_ImageSwipe_JHSv2.hype.zip (416.9 KB)


Overview
This version uses the code @DBear posted just above and applies it to the entire symbol in the v2 demo. (It could have been just the scrollbar - but why not give people a bigger target?) Mousing over the symbol allows for horizontal scrolling. This works for the scrollball in my mouse - as mentioned in my previous post I do not have a track pad.

The scrollbar still drags manually if desired.


Description

There is a function, “mouseOverSwipe” triggered by a “Mouse Over” event of the "Slider"symbol.

This symbol has been given an ID of slideHolder (in Hype’s interface). The variable “slideMouseOverTrigger” is set to this value.

We then use that set-up to run the “Slider” symbol’s “Main Timeline”.
(Note: If You did not know this - Symbols have their own timeline.)


function “mouseOverSwipe”

slideMouseOverTrigger = hypeDocument.getSymbolInstanceById('slideHolder');

			//dBear's code
	element.onwheel = function(e){
	if(e.deltaX < 0){
			console.log("swiping left")
			slideMouseOverTrigger.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionReverse, false)
		}
		if(e.deltaX > 0){
			console.log("swiping right")
			slideMouseOverTrigger.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward, false)
		}
	}

#6

:slight_smile: Nice.


#7

This doesn’t have mouse-hover=scroll behavior, but it has a simple two-finger scrollbar by simply Grouping the image then setting Content Overflow to Scrollbars:

scrollbars.hype.zip (473.5 KB)

It’s not bad for many situations and of course is simple to create. It doesn’t have Jim’s nice Pause in the middle, unfortunately.


#8

@frank52 And here’s the hover version in which mouse position determines the pan of the element. This is entirely due to a script @DBear sent a few weeks back. I’m not nearly this clever.

Nb: this line…

	if(mouse.x > 350 && rTime >= 2.5){

sets 350 as the half-way point, ie, half of your element’s width.

scrollbars.hover.hype.zip (446.7 KB)

Also, I agree with your original point: swipe support could absolutely be more explicit.


#9

Thanks guys - you’re the best educators I’ve found on a forum - not only have you solved the problem, you’ve taught me something new to boot - much appreciated.