Two waypoints only trigger once

hello, I hope you could help me with my struggle:

I have built a horizontal animation with two waypoints. Each waypoint should be triggered after passing and not played again. But the first waypoint is loaded again when I scroll back. Only when the last waypoint is played, they are not loaded again.

Another problem is, when I click on the link (‘please click here’) and jump to the next scene, from there back again (click on arrow) the first waypoint is loaded again.

It would be nice if the waypoints would be replayed when jumping back to the first scene without being visible before.

test-waypoint.hype.zip (770.0 KB)

I hope for your help! Thank you

1 Like

waypoints offers methods (like destroy …) on instances and class:

http://imakewebthings.com/waypoints/api/waypoint/

Thank you for the link. Unfortunately I’m not good at coding. Could you please give me an example what I need to change? Many thanks.

Hi, just copied over from the documentation:

var yourWaypointInstance = new Waypoint({
  element: document.getElementById('yourId'),
  handler: function(direction) {
    //do something
//then destroy:
 yourWaypointInstance.destroy()
  },
  offset: 'bottom-in-view' //options
})


btw: the last update for waypoints on github has been 4 years ago …

Thanks, but I can’t get it fixed. The second waypoint doesn’t work.
test-waypoint.hype.zip (775.0 KB)

the waypointslink was outdated. i replaced it with the actual one and threw away Jquery as it is not necessary.test-waypoint.hype.zip (758.1 KB)

please – while coding – enable the console for testing. this’ll keep you aware of upcoming errors …

2 Likes

It works perfect. Thank you so much for your help!