Drag element so it will change position and trigger waypoint?


Has anyone worked with a scenario where you can drag an element so that it’s position changes and it will force the view in the browser to trigger a waypoint action on a timeline?
I have seen scenarios with custom cursors and HTML widgets but not an actual drag object action.


Good to see you Nick! The only way I can get it to work is to add an innerHTML box in the draggable element and drag from it…

<div style="width:100%;height:100%;border:solid;margin:-25px auto"></div> 

Also, you can drag from the top border of the element and it will trigger the waypoint (without the innerHTML stuff)

Hi Greg,

Can you post an example…


way.hype.zip (16.2 KB)

1 Like


I wasn’t sure if I understood. Thanks for confirming.

Heres what I had.

wayPointTest.hype 2.zip (15.1 KB)

Ah, I didn’t think of using groups. I like it Mark!

1 Like

Wonder if this is what @nick had in mind.

Update this works better.

wayPointTest.hype 4.zip (50.6 KB)

Thanks Greg!
I tried the DIV method but not the way you set it up.
That could work out. Let me put something together and I will post the concept.




That’s It!!
Minus the jumpUP.
That made the browser take on a life of it’s own scrolling up and down and up and down. That would be a great April Fool’s Day Interface :wink:
I am going to try both @gasspence and your method with the concept and I will post.


:laughing: Just realised that that will happen if the Browser window is short, which forces the element to exit when it reaches the bottom so it jumps back up and again is forced to exit and jumps back down… repeat,repeat,repeat,…

1 Like

@MarkHunte, @gasspence

Well here is the concept…I am making some tutorials and idea generators for the new release.
In this one drag an element to reveal something fun.
An animation, or an image or a link to another place.
Think of a visual adventure game that uses the waypoint feature to travel around a tunnel perhaps.

Now I want to export this concept into Xcode to see if it holds up for storybooks etc.

Anyway enjoy this little Christmas Hype toy :slight_smile:

Christmas_waypoint.hype.zip (2.0 MB)


Scrolling back up once the lightbulb is past the viewport causes a lot of jittering, if the mouse is in the scene.

Yes I noticed that…Also one other issue it is not working on iOS.
I found that there are some issues with the scroll to top in the jumpUp function…
hmmm need to think this one through a little bit more.
I like the thought of using elements as the navigator.
I thought about custom cursors as well but they were pretty buggy.

@nick, @gasspence

I just wrote some code for a floating button. Very simple. While doing it I was thinking it could have some play in this thread.

The JS is run on scene load. and the actioNButton is placed up top

var actioNButton = hypeDocument.getElementById('actioNButton');
  window.addEventListener("scroll", function() {
    hypeDocument.setElementProperty(tButton, 'top', $(window).scrollTop() +50, 1.0, 'easeinout')


Example here