Set number of loops

I’m using Hype to make web banners, and they need to have a set number of loops (3 actually). I refuse to go the gif route as it takes forever to create and edit in Photoshop, and I’ve scoured the forums trying to find if it’s possible to loop a set number of times within Hype, to no avail (unless I’ve completely missed something). Please make this possible in future versions, as it’s a little bothersome to copy animations or scenes to make certain websites happy. It would be a lot more fluid to just set a loop number.

Edit: I also do not want to duplicate scenes as the file size would balloon astronomically!

I don’t quite understand what your problem is. You create banners within Hype that are ment to be “looped” 3 times? Are you doing it within a timeline? The easiest way is to end the timeline after 3 of the same animations. However, if you want it to be called by a javascript and make it loop the same timeline I’ve been trying to figure it out with javascript. I’m not sure why the timeline is “not defined” in firebug but perhaps someone here could help us out. Take a look at my example here: (9.1 KB)

Yes, I mean that my timeline should loop 3 times then end. In Photoshop you can select a number of loops for your gif without having to repeat the frames, but here we’re given no such route, and again I refuse to go back to gifs because booo. I’m no javascript hero so opening up the javascript files produced during HTML5 exportation of a Hype document gives me the creeps and I’d as likely screw up than fix my problem if I tinkered in there. I’d love if there were an option in the UI, without having to repeat animations so I could preserve my file size, to select the number of loops for a timeline, either in timeline actions or during exportation to HTML5.

Setting the number of times a timeline should loop is definitely a cool idea and something we will consider for a future version.

Here is a javascript approach to loop the Main Timeline 4 times: (11.0 KB) .

If you prefer not to use javascript you could either copy/paste the animations 3 times or add a second timeline which is responsible for looping the Main Timeline. This timeline would simply have two actions that restart the main timeline and pause the current timeline. Then at the end of the Main Timeline continue this loop timeline. (11.5 KB)


Awesome Stephen! I guess “if” works much better in this case, or could it be done with “setinterval” as well?

That is indeed awesome news, Stephen, thanks :slight_smile:

You could use setInterval, the issue is that hypeDocument is out of scope when your function fires.

This should work:
setTimeout(function(){ hypeDocument.continueTimelineNamed(‘Main Timeline’, hypeDocument.kDirectionForward); }, 3000);

I just favored the ‘if’ solution because it requires less knowledge of javascript.

1 Like

Thanks Stephen! I added the clearInterval to it so now it works as intended:

var myVar;

myVar = setInterval(function(){ hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward); }, 3000);
setTimeout(function( ) { clearInterval( myVar ); }, 7000);

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

1 Like

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.

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.


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

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.

1 Like

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);

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)


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

1 Like

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:

1 Like


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)

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?