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')
}
}
} `
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.
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.
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?
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?
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.
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
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.
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.
@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
I think he needs both click and swipe actions working together
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.
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?)
