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.
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.
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);
console.log(bTranslateY.join(""));
console.log("fired");
if (bTranslateY.join("") > "40000") {
console.log("Left the screen");
}
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;
while(l--){
//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