Control timeline with swipe gestures via javascript

Using JavaScript with Hype
#10

Thanks guys for your replies.

I have had a play around with custom behaviours but struggling to get things to work.

Part of the code (added below) found in @DBear's example (file attached) continues a timeline within a symbol when left or right swipe gestures are detected.

Ideally I am looking to modify this function, so instead the main timeline of the project continues forward / backwards when swipe gestures are detected anywhere on screen.

I have very little understand of javascript so would be grateful for any help on modifying this function.

function playAnimationForiOS(hypeDocument, element, event) {

var node = hypeDocument.getElementById("carousel")

node.ontouchstart = function (e) {
	if(e.touches.length == 1){ // Only deal with one finger
    	var touch = e.touches[0]; // Get the information for finger #1
    	//console.log("touched");
    	last_position = {
	        x : touch.pageX,
	        y : touch.pageY
	    };
	    
  	}
}

node.ontouchmove = function (e) {
	if(e.touches.length == 1){ // Only deal with one finger
    	var touch = e.touches[0]; // Get the information for finger #1
    	//get the change from last position to this position
        var deltaX = last_position.x - touch.clientX
        //console.log(deltaX)

        //check which direction had the highest amplitude and then figure out direction by checking if the value is greater or less than zero
        if (deltaX > 0) {
        	// left
            hypeDocument.triggerCustomBehaviorNamed('continueAnimationForward')
        } else if (deltaX < 0) {
            // right
            hypeDocument.triggerCustomBehaviorNamed('continueAnimationReverse')
        }
	    
  	}
}   `

dragToControlTimeline.hype.zip (873.8 KB)

#11

you do not need any custom js when your goal is to continue the main timeline forward or reverse of a scene on swipe left right. just use the swipeactions on the scenelevel.

that's how i'd understand this:

#12

I was using swipeactions initially but realised there was some interference with some buttons not working, and other issues when resizing the page. I removed the swipe actions and everything continued to work as expected.

Searching the forum I found @DBear's example and the use of javascript to control the swipe gestures seemed to solve both issues. So was thinking if possible to use the javascript function to control my main timeline rather than a timeline within a symbol but unfortunately I couldn't work out how to modify the javascript function to do this.

Thanks.

#13

you may provide a hypefile showcasing your issue/attempt ...

i can imagine kind of this to happen ... perhaps assigning swipeable areas that do not include other interactive elements?

/////

or just place a symbol in the scenebackground and attach the swipeaction ...

#14

Please find attached a basic example file which demonstrates the issue.

I have two buttons which divide the website in half, clicking the left side will continue the timeline in reverse, clicking the right side continues the timeline forwards. The idea being that it's easy to navigate the website by clicking left or right. (these do have an opacity of 0 but for the example have made them slight visible)

As soon as I add the swipe gestures 'On Swipe Left' and 'On Swipe Right' for use with tablets and mobiles the response from the buttons is interrupted and either do not function or take multiple clicks to work.

So I wondered if swipe actions via javascript is a solution so created this post, but maybe instead there is a better away to achieve the left and right button navigation using javascript?

Thanks.

test.zip (15.3 KB)

#15

Ok give me a minute to get my head around what's been going on .... and also clarify a few things

First of all,

is there a reason that you're using Hype 3 and not the latest? No judgment but need to keep that in mind with solutions.

Also, just to clarify, I'm assuming the goal is to have a listener for swipe actions anywhere on the scene (or at window level) control a particular timeline when swiping left / right. But you also have other elements that you don't want to be swipe-able?

EDIT: @Ollie

just saw the post above this one and looking at the example.
What is the reason to have clickable areas vs swipe-able areas for different devices?

#16

test 3.hype.zip (20.4 KB)

which disables swipe on interactive elements

1 Like
#17

Hi @DBear thanks for your reply.

I havent used Hype for a little while and only recently having had more time decided to update my website with a different design so havent looked into upgrading as of yet.

The website I have designed has the exact same setup as the example I have attached, two buttons which divide the webpage in half in any dimension. Clicking the left side continues the timeline backwards, clicking the right side continues the timeline forwards. The timeline is simple with a few images fading in and out with pause actions in between.

I have a few flexible layouts one of which I included both the left and right buttons as well as adding swipe functions which is when I discovered the issue. I included both in one layout to cover all basis as tablets are getting as big as laptops and desktops.

I am looking for a way where I can include both the left and right buttons as well as the swipe left and right so that if you view the webpage on a touch device or computer it works either way.

Thank you for your help.

#18

OK great. Thanks for the explanation.

I previewed your file in both desktop and using the Hype reflect app on an iPad and found them to be working as expected. i.e I could both click the navigation areas and swipe to get the timeline to play

#19

That is good news!, however for some reason I can't seen to do the same.

As soon as the 'On swipe Left' or 'On Swipe Right' are added the buttons either don't respond or take multiple clicks to work.

Just to confirm you have tested the example I uploaded? (test.zip)

Thanks.

#20

Yes I tested the file (test.zip) you uploaded. I'll try and upload a video in action later so you can see what I'm seeing on the iPad and check that this is expected behaviour.

1 Like
#21

Thank you, that would be greatly appreciated!

#22

I do know that there was some discussion on swipe interfering with click actions way back in 2017

and the solution was to add an element behind these clickable elements to control swipe actions but in this case you have used the full screen for those so that wouldn't really work.

I'm wondering if there has been a change since Hype 3 to Hype 4 that has addressed this possible problem / bug @jonathan do you have any more insight? As stated, it seems to be working for me but @Ollie seems to be experienced something different.

#23

Hi @Ollie

As requested a recording from my iPad. Showing what's happening when clicking and swiping.

1 Like
#24

... and did you try my uploaded file :wink:

#25

Thanks very much for uploading. Really helpful to see it working as intended.

I will have to take a further at my project and report back.

Thanks again!

#26

@h_classen I think your solution wouldn't work as he has the left and right of the screen covered with clickable elements so anything underneath wouldn't be able to be swiped ... I could be wrong though :slight_smile:

I think he needs both click and swipe actions working together

1 Like
#27

Thanks for uploading, I have trialed Hype 4 and opened your file.

As @DBear has mentioned I am looking to include left and right clickable elements as well as swipe gestures. Good to know though a symbol can be used like this, I will consider this for future projects.

Thanks again for yoru help

#28

ah, i thought the clickable areas have just been workarounds as your initial questions suggested this to me at least :wink:

but anyway: i'd use buttons like arrows or so for clickable progress ... from an UI-view :slight_smile:

1 Like
#29

Hmm, it also works for me when testing on iOS 14, macOS 11 Safari, and Chrome desktop. There have been some changes to adapt to new iOS versions, but I'm not sure any that are exactly matching what you see.

It'd be useful to know more about the config like the particular software versions and devices (apologies if it is already in this post) and maybe likewise create a screen recording or video of your interaction with device.

(as a side note the On Swipe Action seems reverse - it took me a while to realize I needed to swipe left to right instead of right to left to advance the page?)

Products
Company
Social
Hype Support
Whisk Support
Store

Copyright © 2010-2020 Tumult Inc. All rights reserved.
Handcrafted in San Francisco.