Hi I am new to Hype3, I want to use Hype3 to do an interactive prototype for my app design project.
However, I can’t find a proper way to do scroll action in iPhone. Like the natural way of using finger to scroll down content.
<img
And if I want to slide “Buy it again” bar and “What’s on sale” bar, what should I do?
Thank you thank you.
It may be difficult to find a way to have one scene do it all.
You can control a timeline with drag actions. So create a timeline for example Scroll up in scene one.
And in scene 2 create two timelines , one for each row to scroll across.
Some one may have a better way/idea but here is a simple example.
ScrollAppTest.hype.zip (1.2 MB)
Thank you for the prompt reply Mark! The example is really thoughtful and helpful, I copied what you did in the exmaple it works nearly perfect. 
I had a play with this and have it working in a single Scene.
I use some Javascript to determine the drag direction. The code is pretty simple.
//console.log(event.hypeGesturePhase);
//console.log(event);
//console.log( event.hypeGestureXPosition);
//hypeGestureYPosition
/*
********************************************************************************
(Note: Notice the return command at the end of each if clause for the timeline actions.
If you want a diagonal type Touch Drag action removing the Returns give something similar)
********************************************************************************
*/
var image = hypeDocument.getElementById('image');
/*
*******************************************************************************
we look for the drag gesture start
*******************************************************************************
*/
if (event.hypeGesturePhase == "start" ){
/*
*******************************************************************************
we get the X & Y of the drag touch position. Where your finger started the drag.
*******************************************************************************
*/
window.startXPosition = event.hypeGestureXPosition;
window.startYPosition = event.hypeGestureYPosition;
//console.log(image.style.top);
//console.log(image.style.left);
}
/*
*******************************************************************************
we look for the drag gesture end
*******************************************************************************
*/
if (event.hypeGesturePhase == "end" ){
/*
*******************************************************************************
we get the X & Y of the drag touch position. Where your finger ended the drag.
*******************************************************************************
*/
window.endXPosition = event.hypeGestureXPosition;
window.endYPosition = event.hypeGestureYPosition;
/*
*******************************************************************************
We deduct the end X position from the start X position. If we have a + greater than 30px left we
scroll left -right
*******************************************************************************
*/
if ( (window.endXPosition - window.startXPosition ) > 30 ){
/*
*******************************************************************************
we want to limit trying to go beyound the left edge and looping the timeline to the start.
*******************************************************************************
*/
if ( parseInt(image.style.left) < 3 ){
hypeDocument.continueTimelineNamed('scrollAcross', hypeDocument.kDirectionForward )
return;
}
}
/*
*******************************************************************************
We deduct the end X position from the start X position. If we have a - greater than 30px left we
scroll right - left
*******************************************************************************
*/
if ( (window.endXPosition - window.startXPosition ) < -30 ){
/*
*******************************************************************************
we want to limit trying to go beyound the right edge and looping the timeline to the start.
*******************************************************************************
*/
if ( parseInt(image.style.left) > -349 ){
hypeDocument.continueTimelineNamed('scrollAcross', hypeDocument.kDirectionReverse)
return;
}
}
/*
*******************************************************************************
We deduct the end Y position from the start Y position. If we have a + greater than 30px left we
scroll down
*******************************************************************************
*/
if ( (window.endYPosition - window.startYPosition ) > 30 ){
/*
*******************************************************************************
we want to limit trying to go beyound the top edge and looping the timeline to the start.
*******************************************************************************
*/
if ( parseInt(image.style.top) < -118 ){
hypeDocument.continueTimelineNamed('scrollUp', hypeDocument.kDirectionReverse)
return;
}
}
/*
*******************************************************************************
We deduct the end Y position from the start Y position. If we have a - greater than 30px left we
scroll Up
*******************************************************************************
*/
if ( (window.endYPosition - window.startYPosition ) < -30 ){
/*
*******************************************************************************
//-- we want to limit trying to go beyound the bottom edge and looping the timeline to the start.
*******************************************************************************
*/
if ( parseInt(image.style.top) > -608 ){
hypeDocument.continueTimelineNamed('scrollUp', hypeDocument.kDirectionForward)
return;
}
}
}
SlideTestFunction-1.hypetemplate.zip (571.5 KB)
(Note: Notice the return command at the end of each if clause for the timeline actions.
If you want a diagonal type Touch Drag action removing the Returns give something similar)
That’s really cool! Would it be possible to have the scrollAcross work with being able to normally scroll down? Or just in a way that the up/down animation stops at the moment the drag stops, and doesn’t continue the timeline?
I just did a Slight update.
I had forgot to set the scroll up top max settings to the correct number. it should be 118 I had it at 120
A quick explanation:
When the image is first loaded it’s Top Property is 118 px and it’s Left Property is -349 px.
We used this in if clauses to get the current Top & Left properties after a drag ends.
We then only move the image Down if the current Top property is less than 118 or Up if it is greater than -608
We only move Right if the current Left is greater than -349 or Left if the current Left is les than 3
So if you adjust the image position you need to make sure these numbers are correct.
Can you explain a bit more on what you mean on your last post