Set number of loops

(J S Poyser) #9

Hi Stephen, I know this is old but Im new to Hype and its solving so many issues for me.
I tried your code and it works a treat. Would you happen to know what I would need to do if I wanted it to stop on the 3rd loop at a specific time?

Many thanks

(Carola Clavo) #10

I need this too, commonly web ads loop three times and then stop in the last frame where you can see the offer and click button.

(J S Poyser) #11

Hi there.

Open the “Resources” window.
Add javascript function.
Label it loop3 (This is set to “untitledFunction” as default).
Copy and paste into the same file the following:

if (window.loopCount == null) {
	window.loopCount = 0;

if (window.loopCount < 3) {
	hypeDocument.startTimelineNamed('Main Timeline', hypeDocument.kDirectionForward);

Create another javascript function and label this “stop”.
copy and paste the following into the same file:

if (window.loopCount == 3) {
hypeDocument.pauseTimelineNamed(‘Main Timeline’);

Now go to your timeline and create 2 Timeline actions.

Place the 1st where you want it to stop permanently. (You will be prompted with a number of options, choose “Run Javascript” then choose “Stop”).
Then place the 2nd where you want it to loop 3 times from. (choose “Run Javascript” then choose “loop3”.

Thats it.

Hope it works.

(Carola Clavo) #12

Thank you! I’ll store this in my Notes. :grinning:

(Damion Parsons) #13

Hi @stephen,

How can achieve the same results in your “” example if I have 2 scenes the project instead of 1 scene?



I’ve adapted @MarkHunte’s example from another thread…

Hype Demo: loop MH (30.1 KB)

In your other related post (see below) You wanted 5 frames/sec. I did not find that frame rate in Hype’s drop down selector - the lowest I saw was 8 frames. I do not know if there is a way to set a custom number.

Loop last scene back to start
(Pete) #15

Hi Jim, Question below runs fine as infinite amount of counts however I want to tweak this where theres an interval set for 15secs and then it switches to new timeline within symbol? Any Ideas on how to accomplish this?

 var allSymbolInstances = hypeDocument.getSymbolInstancesByName('Spinner');
 for (var i = 0; i < allSymbolInstances.length; i++) {
 	var symbolInstance = allSymbolInstances[i];
 	symbolInstance.startTimelineNamed('Main Timeline', hypeDocument.kDirectionForward);

(Mark Hunte) #16

The main timeline action calls the symbol code to start all the symbols

	var allSymbolInstances = hypeDocument.getSymbolInstancesByName('Spinner');
 for (var i = 0; i < allSymbolInstances.length; i++) {
 	var symbolInstance = allSymbolInstances[i];
 	symbolInstance.startTimelineNamed('loop', hypeDocument.kDirectionForward);

In the symbol, we have two actions on the loop timeline.

The first one calls a new js function loopSecondCounter.

    var symbolInstance_ = hypeDocument.getSymbolInstanceById(
 	 if(typeof window[].counter == "undefined") {
	window[].counter  = Math.floor(symbolInstance_.currentTimeInTimelineNamed('loop'))
	} else {
	window[].counter   +=  Math.floor(symbolInstance_.currentTimeInTimelineNamed('loop'))
	if (window[].counter > 14){
	symbolInstance_.startTimelineNamed('col', hypeDocument.kDirectionForward);
element.querySelector('.textCounter' ).innerHTML =  window[].counter

This creates a global counter property for each symbol that’s loop timeline calls it.
The property’s value accumulates the current time in the loop timeline.
The calling action is 100th of a second before the second action for this reason.

The second action simply just restarts the loop timeline.

Symbol loop by seconds (25.5 KB)

(Mark Hunte) #17

Slight update done to code above
Made the undefined of the global property an if else instead of an if block

(Pete) #18

This is awesome, Thanks Mark. I took me a few minutes to understand the inner workings of the code and how its presented, pretty clever stuff.

Thanks again :slight_smile:

(Mark Hunte) #19


Check the timings. I think because I was flooring the time it may be slightly out.

I only used floor() so I could get a clean number in the text.

This may work better

	var symbolInstance_ = hypeDocument.getSymbolInstanceById(
 	 if(typeof window[].counter == "undefined") {
	window[].counter  =  symbolInstance_.currentTimeInTimelineNamed('loop') 
	} else {
	window[].counter   +=   symbolInstance_.currentTimeInTimelineNamed('loop') 
	if (window[].counter > 15){
	symbolInstance_.startTimelineNamed('col', hypeDocument.kDirectionForward);
element.querySelector('.textCounter' ).innerHTML =  Math.floor(window[].counter)

I took out the floor() for the main code and put the limit up 15 ( from 14)

(Pete) #20

Mark what would it take if I need this slightly tweaked for my project.

So In your example the hype file code loops the spinner in the new timeline ‘col’. What I wanted initially for it to stop completely at 15 secs ‘loop’ before entering ‘col’ timeline?

(Mark Hunte) #21

I know you know the answer to that…


symbolInstance_.startTimelineNamed('col', hypeDocument.kDirectionForward);

(Pete) #22

Kinda ?

if (window[].counter > 15){
	symbolInstance_.startTimelineNamed('col', hypeDocument.kDirectionForward);

(Mark Hunte) #23

Thats it.


(Mark Hunte) #24

If you want to avoid code, you can also just have a second timeline that triggers stuff on the 15s frame with a an timeline actions.

(Pete) #25

Yes, true I was aware of that, but this one needs the above the solution. Without going too much into detail, the loop is basically for a propeller of a Drone Mavic 2 Zoom/Pro consisting of just one symbol propeller duplicated for 4x times for 4x sides spinning at rate .1 - .2 seconds in y coordinate giving it a sense of that fast movement? Anyhow, Safari gave me a warning because that propeller animation being in a constant state of loop thereby almost ‘choking the browser’?

Im toying with different ideas that may or not need the above.

I ended up not going with the above and made a decision to stop the animation for the propeller at a specific point in time by dropping an action in different timelines where it needed to be stopped where it was needed and hide the spinning drone by just using this

 var allSymbolInstances = hypeDocument.getSymbolInstancesByName('Spinner');
 for (var i = 0; i < allSymbolInstances.length; i++) {
 	var symbolInstance = allSymbolInstances[i];
 	symbolInstance.pauseTimelineNamed('Main Timeline', hypeDocument.kDirectionForward);

heres the result

(Stephen O'Callaghan) #26

This is exactly what I was after! Thank you so much! :grin:

(Stephen O'Callaghan) #27

Was this ever implemented in any updates since March 2015?

(Jonathan Deutsch) #28

Specified loop count is not a feature presently; the code above is still the best way to accomplish this.