Waypoints which side of the viewport the element exited on- Request

I do not seem to be able to get any event details for waypoints.

Initially it would be great to be able to get which side of the viewport the element exited on.

As an example. In my example bat and ball game :

I made a suspended bridge at the bottom of the scene that has a exit waypoint set on it. when the ball hits the bridge the ball will make the bridge collapse and exit the scene. The waypoint function will be triggered by the the bridge exiting. The function stops the timer that is running.

This works really well but it would make more sense to have the exit waypoint placed on the ball.
This would mean as the ball falls through the bottom of the scene and out of the viewport the stop time function will be called.

But the problem with this is that if the ball bounces high up it exits the viewport at the top but then drops down again.
This means the timer is stopped incorrectly. If we could get the exit side in the event info = top, left, right, bottom then we could use that to help massively with situations like this.


What about creating a listening event for the position of the ball and then if it reaches the bottom of the screen it fires the pause timer function.

I agree though a nice passing through of the side information would be very helpful.


I did think about that but was unsure how to get the position into an event.

Would an adaptation of the solution we gave Greg work in some way? Creating an array of the positions? and then checking it when on exit viewport and if it’s lower than the screen height then fire the timer function.


Hmm, That could work as a hack., keep the exit viewport on the ball when it fires the exit we check it’s position.

I will give that a go. Thinking for the Top I just need to work out if the number is signed or unsigned

but I was hoping you had an idea to get a position eventListner :smile:

To determine the top or bottom exit, I kept it simple.

    if (ballTop > 0 ){

The outside top of the viewport is always going to be: - signed. The bottom will be unsigned.
It will be the same with he left property.

So atlas I can use those for now. But getting the real event info would be much better.

Thanks for the idea @DBear, always good to have more than one set of eyes on a problem.

1 Like

Alas, I couldn’t find an event that listens for position. But …

I found a way to get the translateY property (which changes when the element leaves the viewport) and match a condition that fires whatever you want. This is a new function “on Exit Viewport”

        var ball = hypeDocument.getElementById('ball');

 	var transform = ball.style.transform.split(" ");
	var bTranslateY = transform[1].match(/\d/g);
	if (bTranslateY.join("") > "40000") {
		console.log("Left the screen");

not pretty but it works :wink:


Check out Mutation Event … Check The pinball Example

They are deprecated

It looks like they are superseded by Mutation Observers.

Any one here use them.?

Which makes it even more confusing and difficult at least for me :slight_smile:

1 Like

Would a ‘On Viewport Exit’ javascript on the ball as simple as this work?

var y = hypeDocument.getElementProperty(element, 'top')

if (y < 0) {
	console.log('Exited via Top')

if (y > 0) {
	console.log('Exited via Bottom')

OOPS : I see Mark already has the same in one of the above posts.

1 Like

sry that’s what i meant ‘mutation observer’

    var element = document.getElementById(toObserveId);
    var observer = new MutationObserver(observerChanges);

observer.observe(element, {
    attributes: true,
    subtree: false,
    childList: false,
    characterData: false

function observerChanges(mutationRecord, mutationObserver) {
var   l = mutationRecord.length;

  //do what ever ... may be check the outerHTML :smile: 
myRecord = mutationRecord[l].target.outerHTML;

may be you simply want to catch the event without using its data … check this

1 Like

So does Mutation Observer put the changes in an object or array and then you can change or observe the changes?


let's say yes :smile:
guess you checked it ?!

I couldn’t get my head around changing values. I understood how to “observe” them but I couldn’t see how you would set them

The observer stores a record of changes to an element. say you want to react to a change -> simply assign your new properties to the hypeelement

This looks interesting, I will have a play and see what I can do with it.

Thanks for the example above…

Ideally though it would be good to get the waypoint events exposed and hopefully with info we can use.