I’m using viewport to initiate the timeline, as the animation appears a third of the way down the page.
I’d like the animation to run only once, but with the current behaviour it restarts each time the animation enters the viewport.
Is there a way to perform some sort of loop test in a piece of Javascript to detect if the animation has already run once, and then stop the animation running a second time.
This doesn’t really need code. You would have your action be a ‘Continue Timeline’ action. If your timeline has already played and an additional ‘Continue timeline’ action is triggered, the timeline (which is already at its end) will not run again.
Alternatively, you could use something like the the JavaScript version of this suggestion from Stephen: Set number of loops
I used the Javascript to get this to work as I liked, tweaked to run just once and adding the event to the padlock’s viewport event. This then worked a treat
Just a quick follow-up for anyone using this technique. I created a second animation on the page, but found the javascript didn’t help control the animation timing, it simply started before I got to it further down the page.
The issue, I suddenly realised today, was that the earlier script had already looped once, so the script has to change from 0 to 1 and <2 instead of <1 from the first script.
if (window.loopCount == null) {
window.loopCount = 1;
}
if (window.loopCount < 2) {
window.loopCount++;
hypeDocument.startTimelineNamed('Main Timeline', hypeDocument.kDirectionForward);
}
And so on, for any following animation using viewport and this script. Alternatively, create a different loopCount variable name for each animation. I’m sure there will be a better way, but this worked for me.
Hi Pathfinder, I used this code too and it worked perfectly. I now need it to stop on the last loop but on a specific frame.
Do you know how?
I placed a timeline with this Javascript:
Sorry for the delay in replying. Super busy finishing a project. Sadly I don’t know at this point, although there is probably a way to add more to the javascript control.
First off, I’d add a marker to the time line where you want the animation to stop, and perform some sort of action on it with Javascript call. Your javascript should do a for loop looking for the amount of loops you want to do, but then after a certain number of loops to stop the time line playing.
This is quite simple way to make timelines play only once.
In my case, there are two timelines, and I set two triggers to play two timeline on eneter viewpoint, and I want to the timelines place only once too.
But, if set the trigger at flexible layout as the screenshot:
It will not work, the timelines will play once the scene is loaded, but not on enter viewpoint of triggers, when we view of the content, the timeline already finished.
and only if set the trigger as this screenshot, it will work:
I think the element is very very briefly in the viewport while the responsive layout is being calculated, so at a minimum you should pin to the ‘top’ using the flexible layout properties to avoid this bug.
I’ve filed this as a bug, thanks!
Hi Daniel, I am trying to use your simple method of "continue timeline" to make a symbol only play once but I can't seem to make it work. You can really notice it on my sample here when you go to the mobile version. Any idea what I am doing wrong?
The symbol I want to play once is called "intro". There are a couple other buttons that I want to employ actions to so I have included them in the sample. All of the items are grouped so that I can make the whole thing responsive. gametest.hype.zip (17.5 KB)
