I am needing some help with a javascript function I would like to add to my project which continues a timeline forward and backwards based on the users swipe input (swipe left, swipe right).
I found a project on the forum similar but with my little knowledge of javascript havent managed to change the code to control a timeline that isn't inside of a symbol.
I have tried the built in 'on swipe left' and 'on swipe right' but having had a few issues would prefer to go down the javascript route similar to what I have found on the forum.
Thanks for the example, unfortunately I cant seen to open it with my version, Hype 3.
Is there a way that I can control the timeline with swipe detection without it being associated with an element via javascript. @DBear's example file was close to what I am looking for but without the use of a symbol.
Hype has swipeactions (left,right,up,down) for the scene and symbolobject.
if you do not want to use those you've got to setup your own. easiest way is to rely on Hypes dragaction for an element and assign a javascript to it.
a script could be:
//event.preventDefault();
const treshold = 6;
if(!hypeDocument.customData.swipeStorage)hypeDocument.customData.swipeStorage = {};
if (event["hypeGesturePhase"] === hypeDocument.kHypeGesturePhaseStart) {
hypeDocument.customData.swipeStorage.counter = 0;
hypeDocument.customData.swipeStorage.startLeft = event["hypeGestureXPosition"];
hypeDocument.customData.swipeStorage.startTop = event["hypeGestureYPosition"];
} else {
hypeDocument.customData.swipeStorage.counter++;
hypeDocument.customData.swipeStorage.swipeLeft = event["hypeGestureXPosition"];
hypeDocument.customData.swipeStorage.swipeTop = event["hypeGestureYPosition"];
}
if (hypeDocument.customData.swipeStorage.counter === treshold) {
const yMove = hypeDocument.customData.swipeStorage.swipeTop - hypeDocument.customData.swipeStorage.startTop;
const xMove = hypeDocument.customData.swipeStorage.swipeLeft - hypeDocument.customData.swipeStorage.startLeft;
let direction;
if (Math.abs(yMove) > Math.abs(xMove)) {
switch (true) {
case yMove > 0:
direction = "down";
break;
default:
direction = "up";
break;
}
} else {
switch (true) {
case xMove > 0:
direction = "right";
break;
default:
direction = "left";
break;
}
}
hypeDocument.triggerCustomBehaviorNamed(direction);
}
this would be assigned to an element on drag and will trigger a customBehavior named left, right, up or down ...
Thanks @h_classen for your suggestions and help with this.
Just like Hype's swipeactions for the scene, I was hoping there is a javascript function that when a swipe left or right is detected a specific timeline continues either forward or backwards, so rather than using an element its just when a swipe is detected the timeline continues the chosen direct. Is this possible?
Be sure to name your behaviors exactly "left" "right" "up" and "down" as that's what the solution code expects. These will then get triggered, and will run any actions setup. This can be Starting a timeline.
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.