How to run Waypoint animation once in 3.5

1

In Hype 3.5 how do I get it so the animation just runs one time when the waypoint triggers? At the moment the waypoint is working but everytime I scroll up and down the page the animations starts again again and it’s heaps annoying. Thanks!

2

Hi,

A simple way would be to have the waypoint triggers a javascript function that checks a global variable for true or false. If false the Javascript starts the animation, I assume on a timeline and then set the global variable to true.

The next runs will then return false all the time and the animation does not get called.

1 Like
3

Hi Mark,

I am no Javascript expert would be able to go into more detail about this? That would be very very helpful.

Thanks,

4

On the waypoint action: set it to run a new function. In the function do something like:

if (! window.displayed){ //-- if false

hypeDocument.startTimelineNamed('timelineName', hypeDocument.kDirectionForward)
 window.displayed = true;
 }

window.displayed is a global var, so it will stick around in the session memory of the window.
Because we did not define it before we check if it exists with the not exists statement ! window.displayed it will be undefined which is what this check will return. In this case that is equivalent to false.

We then run the code. and then set window.displayed to true. That defines it and on subsequent checks it will exist and be true so the code will not run.

1 Like
5

Thanks Mark – Here’s that example:

Waypoint-Run-Once.zip (16.0 KB)

cc @martinpgibson

2 Likes
6

Thanks Mark!!! This is awesome. And thanks Daniel for the example :slight_smile:

7

The common case of running an animation once can be done without code. For the action, use Continue Timeline (instead of Start Timeline) and keep the Can Restart Timeline option unchecked. This will have the result of only running the animations on that timeline once.

1 Like