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)
Hi guess what, i am also new to hype it's great.
I am doing simple banner animations. I tried everything with viewpoint to make it play just once, and at the reload of the page. I tried continue after load in the viewpoint etc... just can't to get it to work. If i scroll up and down the banner reloads... i use it in TYPO3 as an html and works realy fine.
I just want it to load once someone goes to the page and scrolls. and when someone scrolls back no reload. Hope this makes sense...
Kind greetings from the Mountains of Austria...
I don't know how TYPO3 works, but if it is possible to have the hype animation not be embedded in an iframe and instead be part of the same scrolling as the rest of the page, then you should be able to:
add an "On Enter Viewport" handler
Set it to "Continue Timeline…" (and make sure "Can Restart Timeline" is unchecked)
Then it would only play once when entering, and not again.
thanks for your answer. I tried it with a simple animation and it works, i had to make a new timeline (and name) and it works fine, with "Can Restart Timeline".
TYPO3 is perfect because i can use plain html code as a content element (no iframe).
The other animation i try and make it from scratch again (one of my first ones in hype). It has got of lot of tweens, symbols and animation running continous in the background, just the viewpoint running once does not work with "Can Restart Timeline". it keeps restarting everytime when it hits the viewpoint.
update: it is working now with all of them . Problem was the trigger square. I created a new timeline called viewport, where I placed all the animations, apart from the background animation. i used the background animation as trigger for the Viewport "Can Restart Timeline". All good now. Thanks...
it's great.
. Problem was the trigger square. I created a new timeline called viewport, where I placed all the animations, apart from the background animation. i used the background animation as trigger for the Viewport "Can Restart Timeline". All good now. Thanks...